import { useState } from 'react'
import { Button, Flex, Modal, Radio, Input, Form, Row, Col, Table } from 'antd'
import { useDataFieldQuery } from '@/hooks/useQuery'
import AppProgressSteps from '@/components/AppProgressSteps'

export default function ButtonModal() {
  const { data } = useDataFieldQuery()

  const [open, setOpen] = useState(false)
  const [current, setCurrent] = useState(0)
  const [form] = Form.useForm()

  const checked = Form.useWatch('checked', form)

  const [step, setStep] = useState<number>(-1)

  const steps = [
    {
      title: '请选择值映射字段',
      content: (
        <>
          <Form.Item label="值映射字段名称" name="name">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="值映射字段英文名称" name="english_name">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="请选择值映射字段" name="checked">
            <Radio.Group>
              <Row gutter={[10, 10]}>
                {data.map((item) => (
                  <Col span={8} key={item.english_name}>
                    <Radio value={item.name}>{item.name}</Radio>
                  </Col>
                ))}
              </Row>
            </Radio.Group>
          </Form.Item>
        </>
      ),
    },
    {
      title: '配置值映射规则',
      content: (
        <>
          <Form.Item label="值映射操作字段">{checked}</Form.Item>
          <Form.Item>
            <Table
              bordered
              columns={[{ title: '序号' }, { title: '原始值' }, { title: '映射值' }]}
              dataSource={[]}></Table>
          </Form.Item>
        </>
      ),
    },
    {
      title: '处理执行',
      content: (
        <>
          <Flex vertical align="center" style={{ marginTop: '20px' }}>
            <Button type="primary" onClick={() => setStep(2)}>
              开始处理
            </Button>
            <AppProgressSteps
              style={{ margin: '80px' }}
              current={step}
              items={[
                {
                  title: (
                    <>
                      第一步
                      <br />
                      新建字段
                    </>
                  ),
                },
                {
                  title: (
                    <>
                      第二步
                      <br />
                      复制数据
                    </>
                  ),
                },
                {
                  title: (
                    <>
                      第三步
                      <br />
                      值映射处理
                    </>
                  ),
                },
                {
                  title: (
                    <>
                      第四步
                      <br />
                      处理结果
                    </>
                  ),
                  description: (
                    <>
                      累计处理XX个字段
                      <br />
                      累计处理XX条记录
                    </>
                  ),
                },
              ]}
            />
          </Flex>
        </>
      ),
    },
  ]

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        值映射
      </Button>
      <Modal
        title={steps[current].title}
        open={open}
        footer={
          <Flex justify="center" gap={20}>
            {current === 1 && <Button type="primary">AI智能建议</Button>}
            {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
            {current < steps.length - 1 && (
              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!checked?.length}>
                下一步
              </Button>
            )}
            {current === steps.length - 1 && (
              <Button type="primary" onClick={() => setOpen(false)}>
                关闭
              </Button>
            )}
          </Flex>
        }
        destroyOnClose
        width={800}
        onCancel={() => setOpen(false)}>
        <div style={{ minHeight: 300, padding: '20px 0' }}>
          <Form form={form} labelCol={{ span: 5 }} preserve={false}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
        </div>
      </Modal>
    </>
  )
}
