import React, { useEffect, useMemo } from "react";
import { Drawer, Tabs } from "antd";
import { useModel } from "umi";
import { NodeType } from "@/enum";
import { create } from "zustand";
import { GetNode } from "@/api/node";

import General from "./general";
import Action from "./action";
import Admission from "./admision";
import Processor from "./processor";
import SkipMode from "./skip";
import Assessment from "./assessment";
import DisplayConfig from "./displayConfig";
import AutoHandle from "./autoHandle";

const tabItems = [
  { label: "常规", component: <General /> },
  { label: "准入条件", component: <Admission /> },
  { label: "动作", component: <Action /> },
  { label: "处理人", component: <Processor /> },
  { label: "跳过方式", component: <SkipMode /> },
  { label: "考核", component: <Assessment /> },
  { label: "展示配置", component: <DisplayConfig /> },
  { label: "自动处理", component: <AutoHandle /> },
];

const editConfigMap = {
  [NodeType.START]: ["常规", "动作", "考核"],
  [NodeType.PROCESS]: [
    "常规",
    "准入条件",
    "动作",
    "处理人",
    "跳过方式",
    "考核",
    "展示配置",
  ],
  [NodeType.AUTO_PROCESS]: ["常规", "自动处理"],
  [NodeType.DECISION]: ["常规"],
  [NodeType.AND]: ["常规"],
  [NodeType.LINK]: ["常规"],
  [NodeType.END]: ["常规", "动作"],
  [NodeType.TEXT]: [],
};

const opsConfigMap = {
  [NodeType.START]: ["常规", "动作", "考核", "抄送人", "通知", "预处理人"],
  [NodeType.PROCESS]: [
    "常规",
    "准入条件",
    "动作",
    "处理人",
    "跳过方式",
    "考核",
    "展示配置",
    "抄送人",
    "通知",
    "预处理人",
    "过时",
  ],
  [NodeType.AUTO_PROCESS]: ["常规", "自动处理", "抄送人", "通知"],
  [NodeType.DECISION]: ["常规", "抄送人", "通知"],
  [NodeType.AND]: ["常规", "抄送人", "通知"],
  [NodeType.LINK]: ["常规", "抄送人", "通知"],
  [NodeType.END]: ["常规", "动作", "抄送人", "通知"],
  [NodeType.TEXT]: [],
};

class configState {
  id: string | null = null;
  tabActiveKey: string = "常规";
  type: NodeType | null = null;
  nodeData: any;
  open: boolean = false;
  updateState: (state: Partial<configState>) => void;
  reset: () => void;
  [key: string]: any;
  constructor() {
    this.updateState = (state: Partial<configState>) => {
      Object.assign(this, state);
    };
    this.reset = () => {
      Object.assign(this, getInitState());
    };
  }
}
const getInitState = () => {
  const { updateState, reset, onOpen, onClose, ...rest } = new configState();
  return {
    ...rest,
  };
};

export const useConfigStore = create<configState>((set) => {
  return {
    ...getInitState(),
    updateState: (para: any) => set((state) => ({ ...state, ...para })),
    reset: () => set(getInitState()),
  };
});

export default function ConfigModal() {
  const tabActiveKey = useConfigStore((state) => state.tabActiveKey);
  const type = useConfigStore((state) => state.type);
  const updateState = useConfigStore((state) => state.updateState);
  const open = useConfigStore((state) => state.open);
  const { graph, mode } = useModel("flowModel");

  useEffect(() => {
    // 监听节点双击事件打开配置
    graph?.on("node:dblclick", (args) => {
      const data = args.node.getData() || {};
      // 备注不需要配置
      if (args.node.shape === "notice-node" || !data?.id) return;

      updateState({ id: args.node.id, type: data.type, open: true });
      GetNode({ id: data.id }).then((res) => {
        if (res?.result) {
          updateState({ nodeData: res.result });
        }
      });
    });
  }, [graph]);

  // 根据不同节点获取tab项
  const items = useMemo(() => {
    const configMap = mode === "edit" ? editConfigMap : opsConfigMap;
    const arr = type !== null ? configMap[type] : configMap[NodeType.PROCESS];
    return tabItems
      .filter((item) => arr.includes(item.label))
      .map((item) => ({
        key: item.label,
        label: item.label,
        children: item.component,
      }));
  }, [type, mode]);

  const changeActiveKey = (key: string) => {
    useConfigStore.getState().updateState({ tabActiveKey: key });
  };

  const handleClose = () => {
    updateState({ open: false });
    setTimeout(() => {
      useConfigStore.getState().reset();
    }, 300);
  };

  return (
    <Drawer
      title="节点属性"
      width={900}
      open={open}
      onClose={handleClose}
      styles={{
        body: {
          paddingTop: 0,
        },
      }}
      destroyOnHidden
    >
      <Tabs
        items={items}
        activeKey={tabActiveKey}
        onChange={changeActiveKey}
      ></Tabs>
    </Drawer>
  );
}
