import { Button, DatePicker, Form, Select } from "antd";
import moment from "moment";

const { RangePicker } = DatePicker;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 6, span: 16 },
};

const options = [
  "ACCESS-CM2",
  "ACCESS-ESM1-5",
  "AWI-CM-1-1-MR",
  "AWI-ESM-1-1-LR",
  "BCC-CSM2-MR",
  "BCC-ESM1",
  "CAMS-CSM1-0",
  "CanESM5",
  "CAS-ESM2-0",
  "CESM2-FV2",
  "CESM2",
  "CESM2-WACCM-FV2",
  "CESM2-WACCM",
  "CIESM",
  "CMCC-CM2-SR5",
  "EC-Earth3",
  "EC-Earth3-Veg",
  "EC-Earth3-Veg-LR",
  "FGOALS-f3-L",
  "FGOALS-g3",
  "GFDL-ESM4",
  "GISS-E2-1-G",
  "GISS-E2-1-H",
  "INM-CM4-8",
  "INM-CM5-0",
  "IPSL-CM6A-LR",
  "KACE-1-0-G",
  "MCM-UA-1-0",
  "MIROC6",
  "MPI-ESM-1-2-HAM",
  "MPI-ESM1-2-HR",
  "MPI-ESM1-2-LR",
  "MRI-ESM2-0",
  "NESM3",
  "NorCPM1",
  "NorESM2-LM",
  "NorESM2-MM",
  "SAM0-UNICON",
  "TaiESM1",
].map((item) => ({
  label: item,
  value: item,
}));

let timeOptions = [];
for (let index = 1861; index < 2004; index++) {
  timeOptions.push({
    item: index,
    value: index,
  });
}

const dataOptions = ["表面温度", "表面向上感热通量"].map((item) => ({
  label: item,
  value: item,
}));

export default function FormPanel({ setShow }) {
  const [form] = Form.useForm();

  return (
    <div className="form-panel">
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        initialValues={{
          CMIP6: [
            "ACCESS-CM2",
            "ACCESS-ESM1-5",
            "AWI-CM-1-1-MR",
            "AWI-ESM-1-1-LR",
            "BCC-CSM2-MR",
            "BCC-ESM1",
            "CAMS-CSM1-0",
            "CanESM5",
            "CAS-ESM2-0",
            "CESM2-FV2",
            "CESM2",
            "CESM2-WACCM-FV2",
            "CESM2-WACCM",
            "CIESM",
            "CMCC-CM2-SR5",
            "EC-Earth3",
            "EC-Earth3-Veg",
            "EC-Earth3-Veg-LR",
            "FGOALS-f3-L",
            "FGOALS-g3",
            "GFDL-ESM4",
            "GISS-E2-1-G",
            "GISS-E2-1-H",
            "INM-CM4-8",
            "INM-CM5-0",
            "IPSL-CM6A-LR",
            "KACE-1-0-G",
            "MCM-UA-1-0",
            "MIROC6",
            "MPI-ESM-1-2-HAM",
            "MPI-ESM1-2-HR",
            "MPI-ESM1-2-LR",
            "MRI-ESM2-0",
            "NESM3",
            "NorCPM1",
            "NorESM2-LM",
            "NorESM2-MM",
            "SAM0-UNICON",
            "TaiESM1",
          ],
          time: [moment("1861", "YYYY"), moment("2004", "YYYY")],
          data: ["表面温度", "表面向上感热通量"],
        }}
        onFinish={(values) => {
          setShow(true);
        }}
      >
        <Form.Item
          name="CMIP6"
          label="模式名称"
          rules={[{ required: true, message: "模式名称是必选项" }]}
        >
          <Select
            placeholder="请选择模式名称"
            mode="multiple"
            allowClear
            options={options}
          />
        </Form.Item>
        <Form.Item
          name="time"
          label="时间段"
          rules={[{ required: true, message: "时间段是必选项" }]}
        >
          <RangePicker
            format={"YYYY"}
            picker="year"
            placeholder={["起始年份", "截止年份"]}
          />
        </Form.Item>
        <Form.Item
          name="data"
          label="数据"
          rules={[{ required: true, message: "数据是必选项" }]}
        >
          <Select
            placeholder="请选择数据"
            mode="multiple"
            allowClear
            options={dataOptions}
          />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
