import React, { memo, useState } from 'react';
import ConfirmModal from 'components/ConfirmModal';
import ImportAssets from 'components/ImportAssets';
import FileSelect from 'components/FileSelect';

function ImportModal({
  visible,
  title,
  data,
  assets,
  onCancel,
  onDataUpload,
  accept = []
}: {
  visible: boolean;
  title: string;
  data: any;
  assets: any;
  onCancel: () => void;
  onDataUpload: (data: any) => void;
  accept: any;
}) {
  const [files, setFiles] = useState([]);

  const handleClose = () => {
    setFiles([]);
    onCancel();
  };

  const onFileSelect = (file) => {
    setFiles((prev) => prev.concat(file));
  };

  const onRemove = (id) => {
    setFiles((prev) => prev.filter((file: any) => file.uid !== id));
  };

  return (
    <ConfirmModal
      title={title}
      visible={visible}
      destroyOnClose
      onCancel={handleClose}
      onOk={handleClose}
      okText="关闭"
      cancelText={''}
      footer={true}>
      <FileSelect onComplete={onFileSelect} accept={accept} />
      <div className="import-container">
        {files.map((file: any) => {
          return <ImportAssets key={file.uid} file={file} onRemove={onRemove} data={data} dataRequest={onDataUpload} assets={assets} />;
        })}
      </div>
    </ConfirmModal>
  );
}

export default memo(ImportModal);
