/*
 * @Description: csv上传数据
 * @Author: taosu
 * @Date: 2022-01-07 18:32:51
 * @LastEditTime: 2022-01-18 20:31:48
 * @LastEditors: taosu
 */
import React, { forwardRef } from 'react';
import { Form, Menu, Select, Input, Tooltip, Space } from '@easyv/antd';
import styles from './index.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import UploadCsvFile from 'containers/data-source-list/components/UploadCsvFile';
import EasyvModal, { ActionModalRef } from 'components/EasyvModal';
import EasyvButton from 'components/EasyvButton';

type ImportCsvDataModalProps = {
  handleSubmit: (file: any) => void;
  changeCurrent: (e: any) => void;
  current: 'dataSource' | 'import';
  form: any;
  sources: any;
  handleFileChange: (e: any) => void;
  handleClose: () => void;
};

const { Item } = Form;
const { Option } = Select;

const Title = ({ changeCurrent, current }) => {
  return (
    <Menu onClick={changeCurrent} selectedKeys={[current]} mode="horizontal">
      <Menu.Item key="dataSource">
        数据导入
        <Tooltip title="从「我的数据」中进行纯数据导入，修改数据后不会修改数据源">
          <QuestionCircleOutlined
            style={{
              fontSize: 14,
              color: '#B4B7C1',
              marginLeft: 5,
            }}
            className="whiteHover"
          />
        </Tooltip>
      </Menu.Item>
      <Menu.Item key="import">本地上传</Menu.Item>
    </Menu>
  );
};
const LocalUpload = ({ handleFileChange }) => {
  return (
    <>
      <Item
        name="name"
        label="数据源名称"
        rules={[
          { required: true, message: '请输入数据源名称!', whitespace: true },
          { max: 16, message: '名称不能超过16个字符' },
        ]}>
        <Input placeholder="请输入数据源名称" type="text" autoComplete="off" />
      </Item>
      <Item
        name="filePath"
        label="上传文件"
        rules={[{ required: true, message: '请上传csv文件!' }]}>
        <UploadCsvFile onChange={handleFileChange} />
      </Item>
    </>
  );
};

const ImportFromDataSource = ({ optionList }) => {
  return (
    <Item
      name="dataSource"
      label="导入数据源"
      rules={[{ required: true, message: '请选择数据源' }]}>
      <Select
        placeholder="请选择数据源"
        className={styles.selectDropdown}
        dropdownClassName={styles.select}>
        {optionList.map((d, i) => (
          <Option key={i} value={d.id}>
            {d.name}
          </Option>
        ))}
      </Select>
    </Item>
  );
};

const Content = ({ form, current, optionList, handleFileChange }) => {
  return (
    <Form form={form} labelCol={{ style: { width: 80 } }} labelAlign="left">
      {current === 'dataSource' ? (
        <ImportFromDataSource optionList={optionList} />
      ) : (
        <LocalUpload handleFileChange={handleFileChange} />
      )}
    </Form>
  );
};

const Footer = ({ handleSubmit, handleClose }) => {
  return (
    <Space>
      <EasyvButton theme="default" onClick={handleClose}>
        取消
      </EasyvButton>
      <EasyvButton theme="primary" onClick={handleSubmit}>
        确认
      </EasyvButton>
    </Space>
  );
};

const ImportCsvDataModal = forwardRef<ActionModalRef, ImportCsvDataModalProps>(
  (props, dataImportModalRef) => {
    const {
      handleSubmit,
      handleClose,
      changeCurrent,
      handleFileChange,
      current,
      form,
      sources = [],
    } = props;
    return (
      <EasyvModal.ActionModal
        ref={dataImportModalRef}
        className={styles.modalContainer}
        title={<Title changeCurrent={changeCurrent} current={current} />}
        footer={<Footer handleClose={handleClose} handleSubmit={handleSubmit} />}
        content={
          <Content
            form={form}
            optionList={sources.filter((item) => item.type === 'CSV文件')}
            current={current}
            handleFileChange={handleFileChange}
          />
        }
      />
    );
  },
);
export default ImportCsvDataModal;
