import { FC, Key, useRef, useState } from "react";
import { Button, Form, InputNumber, Radio, Space, Tag, Tooltip } from "antd";
import { useNavigate } from "react-router-dom";
import {
  ActionType,
  EditableFormInstance,
  EditableProTable,
} from "@ant-design/pro-components";
import { PlusOutlined } from "@ant-design/icons";
import {
  AddIndexModal,
  AddIndexTemplateModal,
  FormPageFooter,
  PageContainer,
  Search,
} from "@/components";
import { TableIndexType } from "../../types";

const SettingIndexPage: FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();
  const tableRef = useRef<EditableFormInstance<TableIndexType>>();
  const [keyword, setKeyword] = useState("");
  const [indexModalVisible, setIndexModalVisible] = useState(false);
  const [indexTemplateModalVisible, setIndexTemplateModalVisible] =
    useState(false);
  const [editableKeys, setEditableKeys] = useState<Key[]>([]);

  const handleSubmit = async () => {
    if (!(await form.validateFields())) return;

    console.log(form.getFieldsValue());
  };

  const handleAddIndexItem = (keys: Key[], list: TableIndexType[]) => {
    form.setFieldValue("list", [...list]);
    setEditableKeys([...keys]);
  };

  return (
    <PageContainer title="设置指标">
      <Form labelCol={{ span: 4, offset: 3 }} form={form} size="large">
        <Form.Item label="指标总分值">
          <Button type="primary">计算</Button>

          <span style={{ paddingLeft: 15 }}>534分</span>
        </Form.Item>
        <Form.Item required label="考核指标">
          <Form.Item noStyle name="list">
            <EditableProTable<TableIndexType>
              className="custom-pro-table mw650"
              actionRef={actionRef}
              editableFormRef={tableRef}
              rowKey="id"
              style={{ marginTop: -15 }}
              recordCreatorProps={false}
              columns={[
                {
                  title: "指标级别",
                  dataIndex: "level",
                  align: "center",
                  editable: false,
                },
                {
                  title: "指标名称",
                  dataIndex: "name",
                  align: "center",
                  editable: false,
                },
                {
                  title: "填报方式",
                  dataIndex: "type",
                  align: "center",
                  width: "230px",
                  renderFormItem: () => (
                    <Radio.Group>
                      <Radio value="point">手动填报</Radio>
                      <Radio value="api">
                        API{" "}
                        <Tooltip title="以 type，start_date，end_date请求API数据。当API获取数据失败时，将自动转为手动填报">
                          <Tag bordered={false} color="warning">
                            注
                          </Tag>
                        </Tooltip>
                      </Radio>
                    </Radio.Group>
                  ),
                },
                {
                  title: "分值",
                  dataIndex: "num",
                  align: "center",
                  width: "130px",
                  formItemProps: () => {
                    return {
                      rules: [{ required: true, message: "此项为必填项" }],
                    };
                  },
                  renderFormItem: () => (
                    <InputNumber
                      variant="borderless"
                      size="small"
                      precision={0}
                      placeholder="请填入正整数"
                      className="w100"
                    />
                  ),
                },
                {
                  title: "操作",
                  align: "center",
                  valueType: "option",
                  render: () => {
                    return null;
                  },
                },
              ]}
              headerTitle={
                <Space>
                  <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    style={{ background: "var(--second-color)" }}
                    onClick={() => setIndexModalVisible(true)}
                  >
                    新建指标
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => setIndexTemplateModalVisible(true)}
                  >
                    从模板中添加
                  </Button>
                </Space>
              }
              toolBarRender={() => [
                <Search
                  placeholder="请输入要搜索的指标名称"
                  style={{ maxWidth: 335 }}
                  onChange={(v) => setKeyword(v.target.value)}
                  onSearch={() => {}}
                  onReset={() => {}}
                />,
              ]}
              editable={{
                type: "multiple",
                editableKeys,
                actionRender: (row, config, defaultDoms) => {
                  return [defaultDoms.delete];
                },
                onValuesChange: (record, recordList) => {
                  form.setFieldValue("deduction", recordList);
                },
              }}
            />
          </Form.Item>
        </Form.Item>
        <FormPageFooter onSubmit={handleSubmit} onCancel={() => navigate(-1)} />
      </Form>

      <AddIndexModal
        checkedKeys={editableKeys}
        open={indexModalVisible}
        onOk={handleAddIndexItem}
        onCancel={() => setIndexModalVisible(false)}
      />
      <AddIndexTemplateModal
        open={indexTemplateModalVisible}
        onOk={() => {}}
        onCancel={() => setIndexTemplateModalVisible(false)}
      />
    </PageContainer>
  );
};

export default SettingIndexPage;
