import { Menu, Dropdown, Upload, notification, Typography, Space, Button } from 'antd';
import { FormattedMessage, useIntl } from 'umi';
import { CloudUploadOutlined } from '@ant-design/icons';
import { exportData, transformValueToEnum } from '@/generated/utils/table-helpers';
import { useCallback, useState } from 'react';

const { Text } = Typography;

export type ImportButtonProps = {
  table: string;
  importFields: any[];
  defaultFields?: Record<string, any>;
  columns: any;
  onFinish: () => Promise<void>;
  action?: string;
};

const ImportButton: React.FC<ImportButtonProps> = (props) => {
  const intl = useIntl();
  const { table, columns, importFields, defaultFields, action = '/api/admin/import' } = props;
  const [loading, setLoading] = useState(false);
  const importColumns: string[] = [];
  const Many2ManyColumns: string[] = [];
  const fieldEnums: Record<string, any> = {};
  importFields.forEach((fieldName: string) => {
    const column = columns.find((item: any) => item.key === fieldName);
    if (column) {
      importColumns.push(fieldName);
      if (fieldName.indexOf('.') !== -1 && column.fieldProps?.mode === 'multiple') {
        Many2ManyColumns.push(fieldName);
      }
      if (column.valueEnum) {
        fieldEnums[fieldName] = Object.keys(column.valueEnum).reduce((acc, enumKey) => {
          const enumValue = transformValueToEnum(enumKey, column.valueEnum, intl);
          acc[enumValue] = enumKey;
          return acc;
        }, {});
      }
    }
  });
  const data = { table, columns: importFields, many2manyColumns: Many2ManyColumns, fieldEnums: JSON.stringify(fieldEnums), defaultFields: defaultFields ? JSON.stringify(defaultFields): null };

  function handleMenuClick() {
    const item = {};
    importColumns.forEach((e: string) => {
      if (defaultFields?.[e] === undefined) { // 有默认值的字段不输出到导入模板
        item[e] = '';
      }
      return e;
    });
    exportData([item], [], columns, intl, `${table}-template`);
  }

  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="template">
        <FormattedMessage id="pages.searchTable.template" defaultMessage="Template" />
      </Menu.Item>
    </Menu>
  );

  const onChange = useCallback(
    (response: any, fileName: string) => {
      const { successList, failList } = response.data;

      if (!failList.length) {
        // 全部导入成功
        notification.success({
          message: <Text type="success">导入成功 x {successList.length}</Text>,
        });
      } else {
        // 部分成功部分失败
        const key = `open${Date.now()}`;
        const columnsWithErrorMsg = [...columns, {key: 'msg', title: '错误信息'}];
        const btn = (
          <Space direction="horizontal">
            <Button
              onClick={() => {
                notification.close(key);
              }}
            >
              关闭
            </Button>
            <Button
              type="primary"
              onClick={() => {
                exportData(failList, [], columnsWithErrorMsg, intl, `${fileName.replace('.xlsx','')}-error`);
                notification.close(key);
              }}
            >
              查看错误详情
            </Button>
          </Space>
        );
        notification.error({
          message: (
            <Space direction="horizontal">
              <Text type="success">导入成功 x {successList.length}</Text>
              <Text type="danger">导入失败 x {failList.length}</Text>
            </Space>
          ),
          description: '你可以下载xlsx文件查看详细错误信息',
          duration: null,
          key,
          btn,
        });
      }

      // 只要有部分导入成功就需要刷新列表数据
      if (successList.length) {
        props.onFinish();
      }
    },
    [props],
  );

  const handleChange = useCallback(
    (event: any) => {
      const { file } = event;
      setLoading(file.status === 'uploading');
      if (file.status === 'done') {
        onChange?.(file.response, file.name);
      } else if (file.status === 'error') {
        notification.error({
          message: '导入失败',
          description: file.response.message || file.response.msg,
        });
      }
    },
    [onChange],
  );

  return (
    <div>
      {!importColumns.length ? (
        ''
      ) : (
        <Dropdown.Button loading={loading} overlay={menu}>
          <Upload
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            maxCount={1}
            showUploadList={false}
            action={action}
            data={data}
            onChange={handleChange}
          >
            <CloudUploadOutlined />{' '}
            <FormattedMessage id="pages.searchTable.import" defaultMessage="Import" />
          </Upload>
        </Dropdown.Button>
      )}
    </div>
  );
};

export default ImportButton;