import { Button, Form, Input, Modal, Select } from 'antd'
import { useMapStore } from '@/stores/map'
import AppUpload from '@/components/AppUpload'
import { useCreateDataset } from '../query'
import { useState } from 'react'

export default function FormButtonModal({ title = '添加数据集' }: { title?: string }) {
  const [open, setOpen] = useState(false)

  const [form] = Form.useForm()
  const getMapValuesByKey = useMapStore((state) => state.getMapValuesByKey)
  const industryList = getMapValuesByKey('bi_data_industry')
  const dataSourceList = getMapValuesByKey('bi_data_source')
  const sensitivityLevelList = getMapValuesByKey('bi_data_sensitivity_level')
  const accessPermissionsList = getMapValuesByKey('bi_data_access_permissions')

  const { mutate, isPending } = useCreateDataset()

  const handleOk = () => {
    form.validateFields().then((values) => {
      const params = { ...values, file: JSON.stringify(values.file) }
      mutate(params, {
        onSuccess: () => setOpen(false),
      })
    })
  }

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        {title}
      </Button>
      <Modal
        title={title}
        open={open}
        onOk={handleOk}
        onCancel={() => setOpen(false)}
        confirmLoading={isPending}
        okText="保存"
        destroyOnClose>
        <Form form={form} labelCol={{ span: 5 }} preserve={false}>
          <Form.Item label="数据集名称" name="name" rules={[{ required: true, message: '请输入数据集名称' }]}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="所属行业" name="industry" rules={[{ required: true, message: '请选择所属行业' }]}>
            <Select options={industryList}></Select>
          </Form.Item>
          <Form.Item label="数据来源" name="source" rules={[{ required: true, message: '请选择数据来源' }]}>
            <Select options={dataSourceList}></Select>
          </Form.Item>
          <Form.Item label="敏感等级" name="sensitivity_level" rules={[{ required: true, message: '请选择敏感等级' }]}>
            <Select options={sensitivityLevelList}></Select>
          </Form.Item>
          <Form.Item label="访问权限" name="access_permissions" rules={[{ required: true, message: '请选择访问权限' }]}>
            <Select options={accessPermissionsList}></Select>
          </Form.Item>
          <Form.Item label="说明" name="describe">
            <Input.TextArea rows={4} placeholder="请输入" />
          </Form.Item>
          <Form.Item name="file" label={null} rules={[{ required: true, message: '请上传文件' }]}>
            <AppUpload accept=".xlsx,.csv" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
