import React, { useEffect } from "react";
import { Form, Input, Switch, Button, FormInstance, message } from "antd";
import SelectModal from "@/components/SelectModal";
import {
  GetPagesForWorkflowNode,
  SaveNodeData,
  EditNodeDisableRecall,
} from "@/api/node";
import LangInput from "@/components/LangInput";
import { useConfigStore } from "..";
import { useModel } from "umi";
import { NodeType } from "@/enum";

export default function General() {
  const form = React.useRef<FormInstance>(null);
  const nodeData = useConfigStore((state) => state?.nodeData);
  const updateState = useConfigStore((state) => state?.updateState);
  const reset = useConfigStore((state) => state?.reset);
  const { graph, mode } = useModel("flowModel");
  // 提交保存
  const handleSubmit = (values: any) => {
    if (nodeData) {
      const param = {
        ...nodeData,
        ...values,
        langName: undefined,
        langNameList: values.langName,
      };
      SaveNodeData(param);
      updateState({
        nodeData: param,
      });
      message.success("保存成功");
      const cell = graph?.getCellById(nodeData.id);
      cell?.setData({
        code: values.code,
        name: values.langName?.find(
          (item: { name: string; value?: string }) => item.name === "zh-CN"
        )?.value,
        langNameList: values.langName,
        langName: null,
      });
      reset();
    }
  };

  // 禁用回退
  const onEditNodeDisableRecall = (checked: boolean) => {
    EditNodeDisableRecall({
      ...nodeData,
      disableRecall: checked,
    });
  };

  useEffect(() => {
    if (nodeData) {
      form.current?.setFieldsValue({
        code: nodeData?.code,
        langName: nodeData?.langName,
        memo: nodeData?.memo,
        appPageId: nodeData?.appPageId,
        disableRecall: nodeData?.disableRecall,
      });
    }
  }, [nodeData]);

  const linkPageTypes = [NodeType.START, NodeType.PROCESS, NodeType.END];

  return (
    <Form
      ref={form}
      labelCol={{ span: 3 }}
      wrapperCol={{ span: 16 }}
      onFinish={handleSubmit}
      disabled={mode === "ops"}
    >
      <Form.Item label="节点代码" name="code">
        <Input placeholder="请输入" />
      </Form.Item>
      <Form.Item label="节点名称" name="langName">
        <LangInput />
      </Form.Item>
      <Form.Item label="节点描述" name="memo">
        <Input.TextArea rows={3} placeholder="请输入..." />
      </Form.Item>
      {linkPageTypes.includes(nodeData?.type) && (
        <Form.Item label="关联页面" name="appPageId">
          <SelectModal
            key={1}
            labelKey="name"
            valueKey="id"
            api={GetPagesForWorkflowNode}
            onSuccess={(data) => {
              return data?.result?.model || [];
            }}
            columns={[
              { title: "页面名称", dataIndex: "name" },
              { title: "页面描述", dataIndex: "description" },
            ]}
            defaultParams={[
              {
                currentPage: 1,
                pageSize: 9999,
              },
            ]}
          />
        </Form.Item>
      )}

      <Form.Item label="禁止撤回" name="disableRecall">
        <Switch defaultChecked={false} onChange={onEditNodeDisableRecall} />
      </Form.Item>
      <Form.Item label={null}>
        <Button type="primary" htmlType="submit">
          保存
        </Button>
        <Button
          style={{ marginLeft: 8 }}
          onClick={() => {
            reset();
          }}
        >
          关闭
        </Button>
      </Form.Item>
    </Form>
  );
}
