import { Button, Form, Input, Modal, FormInstance, FormRule } from "antd";
import { useRef, useState } from "react";

const ExportComponent = (props: {
  callback: (url: string) => void;
  getModal: () => { destroy: () => void };
}) => {
  const formRef = useRef<FormInstance>(null);
  const [value, setValue] = useState("");
  
  const rules: FormRule[] = [
    { required: true, message: "请输入图片链接" },
    { type: "url", message: "请输入正确的图片链接" },
    // { validateTrigger: ['change'],validator: (_rule: any, value: string) => {
    //   if() {
    //     return Promise.reject(new Error('123'));
    //   }
    //   return Promise.resolve();
    // }}
  ]
  const handleChange = async () => {
    props.callback(value);
    props.getModal().destroy();
  };

  return (
    <>
      <div className="text-14px color-#666">网络图片</div>
      <Form ref={formRef} onFinish={handleChange}>
        <Form.Item name="val" rules={rules}>
          <div className="flex gap-8px">
            <Input
              placeholder="请将图片链接地址粘贴在此处"
              value={value}
              onChange={(e) => setValue(e.target.value)}
            />
            <Button type="primary" htmlType="submit">插入图片</Button>
          </div>
        </Form.Item>
      </Form>
    </>
  );
};
export const openInsertImageModal = (callback: (url: string) => void) => {
  const modal = Modal.info({
    title: "插入图片",
    icon: <></>,
    width: 440,
    closable: true,
    footer: <></>,
    content: <ExportComponent getModal={() => modal} callback={callback} />,
  });
};
