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

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

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

  const fieldOptions = data?.map((item) => ({ label: item.name, value: item.name }))

  const hiddenOptions = [
    {
      label: '隐藏',
      value: true,
    },
    {
      label: '不隐藏',
      value: false,
    },
  ]

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        新建柱状图
      </Button>
      <Modal
        title="新建柱状图"
        open={open}
        footer={
          <Flex justify="center" gap={20}>
            <Button type="primary">预览组件效果</Button>
            <Button type="primary">AI对话调整</Button>
            <Button type="primary" autoInsertSpace>
              保存
            </Button>
          </Flex>
        }
        destroyOnClose
        width={1000}
        onCancel={() => setOpen(false)}>
        <div style={{ minHeight: 300, padding: '20px 0' }}>
          <Form form={form} preserve={false}>
            <Divider orientation="left" orientationMargin="0">
              步骤1：数字字段设置
            </Divider>
            <Row gutter={20}>
              <Col span={8}>
                <Form.Item label="请选择“行”字段" name="x">
                  <Select options={fieldOptions} placeholder="请选择" mode="multiple"></Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="计算规则" name="x_rule">
                  <Select options={fieldOptions} placeholder="请选择"></Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="排序规则" name="x_sort">
                  <Select options={fieldOptions} placeholder="请选择"></Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={20}>
              <Col span={8}>
                <Form.Item label="请选择“列”字段" name="y">
                  <Select options={fieldOptions} placeholder="请选择"></Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="计算规则" name="y_rule">
                  <Select options={fieldOptions} placeholder="请选择"></Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="排序规则" name="y_sort">
                  <Select options={fieldOptions} placeholder="请选择"></Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={20}>
              <Col span={8}>
                <Form.Item label="是否隐藏行轴" name="hidden_x">
                  <Radio.Group options={hiddenOptions}></Radio.Group>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="是否隐藏列轴" name="hidden_y">
                  <Radio.Group options={hiddenOptions}></Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Divider orientation="left" orientationMargin="0">
              步骤2：辅助可视化设置
            </Divider>
            <Row gutter={20}>
              <Col span={12}>
                <Form.Item label="请选择“标签”字段">
                  <Select options={fieldOptions} placeholder="请选择"></Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="请选择颜色规则">
                  <Radio.Group
                    options={[
                      { label: '自动颜色', value: '自动颜色' },
                      { label: '不同柱子颜色不同', value: '不同柱子颜色不同' },
                    ]}></Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={20}>
              <Col span={12}>
                <Flex>
                  <Form.Item label="是否有标题" name="hidden_y">
                    <Radio.Group
                      options={[
                        { label: '无', value: '无' },
                        { label: '有', value: '有' },
                      ]}></Radio.Group>
                  </Form.Item>
                  <Form.Item name="title">
                    <Input placeholder="请输入" />
                  </Form.Item>
                </Flex>
              </Col>
              <Col span={12}>
                <Form.Item label="请选择填充图案" name="padding">
                  <Radio.Group
                    options={[
                      { label: '纯色', value: '纯色' },
                      { label: '斜线', value: '斜线' },
                      { label: '横线', value: '横线' },
                      { label: '竖线', value: '竖线' },
                    ]}></Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={20}>
              <Col span={12}>
                <Form.Item label="是否隐藏图例" name="hidden_len">
                  <Radio.Group options={hiddenOptions}></Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="是否四个角圆滑" name="radio">
                  <Radio.Group
                    options={[
                      { label: '不做圆滑处理', value: '不做圆滑处理' },
                      { label: '四个角圆滑处理', value: '四个角圆滑处理' },
                      { label: '两个角圆滑处理', value: '两个角圆滑处理' },
                    ]}></Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Divider orientation="left" orientationMargin="0">
              步骤3：预览组件效果
            </Divider>
          </Form>
        </div>
      </Modal>
    </>
  )
}
