import { UploadOutlined } from '@ant-design/icons';
import { Button, Modal, Upload, UploadFile, UploadProps } from 'antd';
import React, { useState } from 'react';

const ImportModal: React.FC<{
  visible: boolean;
  close: () => void;
  doImpt: (file: any) => Promise<void>;
  accept: string;
}> = ({ visible, close, doImpt, accept }) => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [uploading, setUploading] = useState(false);

  const handleUpload = async () => {
    const file = fileList[0];
    if (!file || uploading) {
      return;
    }

    setUploading(true);

    try {
      await doImpt(file);
      close();
    } catch (e) {
      console.log(e)
    } finally {
      setUploading(false);
    }
  };


  if (!visible) {
    return null;
  }

  return (
    <Modal
      title="数据导入"
      open
      okButtonProps={{
        disabled: fileList.length === 0,
        loading: uploading
      }}
      onOk={handleUpload}
      onCancel={() => close()}
    >
      <Upload
        multiple={false}
        beforeUpload={file => {
          setFileList([file]);
          return false;
        }}
        onRemove={() => {
          setFileList([]);
        }}
        accept={accept}
        maxCount={1}
        onChange={(info) => {
          console.log(info);
        }}
      >
        <Button icon={<UploadOutlined />}>选择文件</Button>
      </Upload>
    </Modal>
  )
}

export default ImportModal