import { useState } from 'react'
import { Button, Flex, Modal, Form, Divider, Select, Radio, Input } from 'antd'
import { useCreateLargeScreen } from '../query'

export default function ButtonModal({ title = '新建大屏' }) {
  const [open, setOpen] = useState(false)
  const [form] = Form.useForm()

  const { mutate } = useCreateLargeScreen()
  // 保存
  const handleSubmit = () => {
    form.validateFields().then((values) => {
      const params = { ...values, content: JSON.stringify(values) }
      mutate(params, {
        onSuccess: () => setOpen(false),
      })
    })
  }

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        {title}
      </Button>
      <Modal
        title={title}
        open={open}
        footer={
          <Flex justify="center" gap={20}>
            <Button autoInsertSpace onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button type="primary">预览</Button>
            <Button type="primary" autoInsertSpace onClick={handleSubmit}>
              保存
            </Button>
          </Flex>
        }
        destroyOnClose
        width={1000}
        onCancel={() => setOpen(false)}>
        <div style={{ minHeight: 300, padding: '20px 0' }}>
          <Form form={form} preserve={false} initialValues={{ size: '1920*1080', bg: 'default', layout: 'auto' }}>
            <Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入' }]}>
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入' }]}>
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item label="大小" name="size" rules={[{ required: true, message: '请选择' }]}>
              <Select
                options={[
                  { label: '1920*1080', value: '1920*1080' },
                  { label: '1024*768', value: '1024*768' },
                ]}
                placeholder="请选择"></Select>
            </Form.Item>
            <Form.Item label="背景" name="bg" rules={[{ required: true, message: '请选择' }]}>
              <Radio.Group
                options={[
                  { label: '默认', value: 'default' },
                  { label: '纯色', value: 'color' },
                  { label: '图片', value: 'image' },
                ]}></Radio.Group>
            </Form.Item>
            <Divider />
            <Button type="primary">添加可视化组件</Button>
            <Form.Item label="组件布局方式" name="layout" rules={[{ required: true, message: '请选择' }]}>
              <Radio.Group options={[{ label: '自动布局', value: 'auto' }]}></Radio.Group>
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </>
  )
}
