import { genChartByAiAsyncMqUsingPOST } from '@/services/bi/chartController';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, message, Select, Space, Upload } from 'antd';
import { useForm } from 'antd/es/form/Form';
import TextArea from 'antd/es/input/TextArea';
import React, { useState } from 'react';

/**
 * 添加图表页面（异步）
 * @constructor
 */
const AddChartAsync: React.FC = () => {
  /**
   * loading
   */
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [form] = useForm();

  /**
   * 提交
   * @param values
   */
  const onFinish = async (values: any) => {
    // 避免重复提交
    if (submitting) {
      return;
    }
    setSubmitting(true);

    const params = {
      ...values,
      file: undefined,
    };
    try {
      // 对接后端，上传数据
      // const res = await genChartByAiAsyncUsingPOST(params, {}, values.file.file.originFileObj);
      const res = await genChartByAiAsyncMqUsingPOST(params, {}, values.file.file.originFileObj);
      if (!res?.data) {
        message.error('分析失败~');
      } else {
        message.success('分析任务提交成功，稍后请在我的图表页面查看~');
        form.resetFields();
      }
    } catch (e: any) {
      message.error('分析失败~', e.message);
    }
    setSubmitting(false);
  };

  return (
    <div className="add-chart-asyc">
      <Card title="智能分析">
        <Form
          form={form}
          name="addChart"
          labelAlign="left"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          initialValues={{}}
        >
          <Form.Item
            name="goal"
            label="分析目标"
            rules={[{ required: true, message: '请输入你的分析目标' }]}
          >
            <TextArea placeholder="请输入你的分析需求，比如：分析网站用户的增长情况" />
          </Form.Item>
          <Form.Item
            name="name"
            label="图表名称"
            rules={[{ required: true, message: '请输入你的图表名称' }]}
          >
            <Input placeholder="请输入你的图表名称" />
          </Form.Item>
          <Form.Item
            name="chartType"
            label="图表类型"
            rules={[{ required: true, message: '请选择你的图表类型' }]}
          >
            <Select
              options={[
                { value: '折线图', label: '折线图' },
                { value: '柱状图', label: '柱状图' },
                { value: '堆叠图', label: '堆叠图' },
                { value: '饼图', label: '饼图' },
                { value: '雷达图', label: '雷达图' },
              ]}
            />
          </Form.Item>

          <Form.Item
            name="file"
            label="原始数据"
            rules={[{ required: true, message: '请上传你的 csv 文件' }]}
          >
            <Upload name="file" maxCount={1}>
              <Button icon={<UploadOutlined />}>请上传 csv 文件（xlsx 文件）</Button>
            </Upload>
          </Form.Item>

          <Form.Item wrapperCol={{ span: 16, offset: 4 }}>
            <Space>
              <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                提交
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default AddChartAsync;