import { Form, Modal, Popconfirm, Space, Spin } from 'antd';
import type { FormItemProps } from 'antd';
import ManualDropdown from './ManualDropdown';
import { memo, useState } from 'react';
import { useIntl } from 'umi';

interface ModalItem extends FormItemProps {
  render: (form: any) => React.ReactNode;
}
interface CustomLinkItem {
  /**
   * @description 输入框的值
   */
  label: any;
  /**
   * @description 当type是弹窗的时候，弹窗的标题
   */
  title?: any;
  /**
   * @description 值修改后触发
   */
  childrens?: CustomLinkItem[];
  /**
   * @description 可以自定义渲染
   */
  render?: () => React.ReactChild | React.ReactNode;
  /**
   * @description 查询后触发
   */
  key?: any;
  /**
   * @description disabled
   */
  disabled?: boolean;
  /**
   * @description 选项菜单的的列表
   */
  loading?: boolean;
  /**
   * @description 输入框默认是否显示，只有第一次生效
   */
  isNotGroup?: boolean;
  /**
   * @description 输入框是否显示
   */
  groupTitle?: string;
  /**
   * @description 点击弹开的类型
   */
  type?: 'modal' | 'popconfirm';
  /**
   * @description 弹窗的form表单配置
   */
  modalItems?: ModalItem[];
  /**
   * @description 输入框显示隐藏的回调函数
   */
  onClick?: (data?: any) => void;
}
interface CustomLinkProps {
  /**
   * @description 当前的配置
   */
  conf: CustomLinkItem;
  key?: any;
  onClose?: () => void;
}
const CustomLink = ({ conf, key, onClose }: CustomLinkProps) => {
  const { formatMessage } = useIntl();
  const { type = 'popconfirm', modalItems = [] } = conf;
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);
  if (type === 'modal') {
    return (
      <>
        <Modal
          title={
            <div>
              {conf.title || formatMessage({ id: 'component.CustomLink.sure' }) + conf.label}
            </div>
          }
          open={open}
          onCancel={() => setOpen(false)}
          onOk={async () => {
            try {
              await form.validateFields();
              conf.onClick?.(form.getFieldsValue());
              setOpen(false);
              form.resetFields();
            } catch (error) {}
          }}
        >
          <Form form={form}>
            {modalItems?.map(({ name, render, ...others }) => (
              <Form.Item key={name} name={name} {...others}>
                {render?.(form)}
              </Form.Item>
            ))}
          </Form>
        </Modal>
        <a
          onClick={() => {
            onClose?.();
            setOpen(true);
          }}
        >
          <Space size={5}>
            {conf.label}
            {conf.loading ? <Spin size="small" /> : null}
          </Space>
        </a>
      </>
    );
  }
  if (conf.childrens) {
    return <ManualDropdown conf={conf} key={key || conf.label} />;
  } else {
    if (conf?.render) {
      return (
        <div
          onClick={() => {
            onClose?.();
          }}
        >
          {conf?.render()}
        </div>
      );
    }
    return (
      <Popconfirm
        disabled={conf.loading || conf.disabled}
        key={conf.key}
        title={
          <p>
            {formatMessage({ id: 'component.CustomLink.sure' })}
            {conf.groupTitle}
            {conf.label}
          </p>
        }
        onConfirm={() => {
          onClose?.();
          conf.onClick?.();
        }}
      >
        <a
          style={{
            color: conf.disabled ? 'gray' : '',
            cursor: conf.disabled ? 'not-allowed' : 'pointer',
          }}
        >
          <Space size={5}>
            {conf.label}
            {conf.loading ? <Spin size="small" /> : null}
          </Space>
        </a>
      </Popconfirm>
    );
  }
};
export default memo(CustomLink);