import React, { useEffect, useState, useMemo, useRef } from "react";
import { useModel } from "umi";
import { Tabs } from "antd";
import InsertCss from "insert-css";
import { useDragResize } from "@/hooks/useDragResize";

import PageStyle from "./PageStyle";
import NodeStyle from "./NodeStyle";
import Structure from "./Structure";
import Theme from "./Theme";
import TagConfig from "./TagConfig";
import IconConfig from "./IconConfig";
import Remark from "./Remark";
import NodeAttrs from "@/components/NodeAttrs";
import AICreator from "./AiCreator";
import AIChat from "@/components/ai/AIChat";

import { getTopicsByAiData } from "../../render";
import { TopicType } from "@/enum";
import { traverseNode } from "../../mindmapHander";
import { useMindMapStore } from "../../models/mindMapModel";

InsertCss(`
  .shalu-tabs-nav {
    padding: 0 16px
  }
`);
export default function index() {
  const {
    rightToobarActive,
    selectedCell,
    rightToolbarActive,
    graph,
    setMindProjectInfo,
  } = useModel("mindmap.mindMapModel");
  const mindProjectInfo = useMindMapStore((state) => state.mindProjectInfo);
  const { setMindMapRightPanelWidth, rightPanelOriginalWidth } =
    useModel("appModel");
  const [activeKey, setActiveKey] = useState("1");
  const { dragging, handleMouseDown } = useDragResize(
    setMindMapRightPanelWidth
  );

  useEffect(() => {
    if (selectedCell.find((cell) => cell.isNode())) {
      setActiveKey("2");
    } else {
      setActiveKey("1");
    }
  }, [selectedCell]);

  const firstNode = useMemo(() => {
    return selectedCell.find((cell) => cell.isNode());
  }, [selectedCell]);

  // 设置节点属性
  const handleSetNodeAttr = (attrs: any) => {
    firstNode?.setData({
      attrs,
    });
  };

  const handleCloseAI = () => {
    rightToolbarActive("");
    setMindMapRightPanelWidth(rightPanelOriginalWidth);
  };

  // 渲染AI创作
  const handleAiCreated = (data: any) => {
    if (Array.isArray(data)) {
      let currentTopic = graph?.getSelectedCells()?.[0]?.data;
      if (!currentTopic) {
        currentTopic = mindProjectInfo?.topics?.find(
          (topic) => topic.type === TopicType.main
        );
      }

      const type =
        currentTopic?.type === TopicType.main
          ? TopicType.branch
          : TopicType.sub;
      // 获取AI转换数据
      const result = getTopicsByAiData(
        data,
        currentTopic?.id,
        type,
        currentTopic,
        graph
      );

      // 往节点下添加
      mindProjectInfo &&
        setMindProjectInfo({
          info: {
            ...mindProjectInfo,
            topics: traverseNode(mindProjectInfo.topics, (topic) => {
              if (topic.id === currentTopic?.id) {
                topic.children = [...(topic.children || []), ...result.topics];
              }
              return topic;
            }),
          },
        });

      setTimeout(() => {
        graph &&
          result.ids.forEach((id) => {
            graph.select(graph.getCellById(id));
          });
      }, 200);
    }
  };

  return (
    <div className="w-full h-full flex">
      {rightToobarActive && (
        <div
          className="h-full w-4px cursor-e-resize hover:bg-blue flex-shrink-0"
          style={{ backgroundColor: dragging ? "#60a5fa" : "" }}
          onMouseDown={handleMouseDown}
        ></div>
      )}
      <div
        className="relative h-full w-full"
        style={{ display: rightToobarActive ? "block" : "none" }}
      >
        {rightToobarActive &&
          !["ai-chat", "ai-creator"].includes(rightToobarActive) && (
            <div
              className="absolute w-16px h-16px right-10px top-10px cursor-pointer z-99"
              onClick={() => rightToolbarActive("")}
            >
              <i className="iconfont icon-cuowu-1 color-#666 hover:color-#333" />
            </div>
          )}
        {/* 样式 */}
        {rightToobarActive === "style" && (
          <Tabs
            activeKey={activeKey}
            onChange={(key) => setActiveKey(key)}
            items={[
              {
                key: "1",
                label: "页面样式",
                children: <PageStyle />,
              },
              {
                key: "2",
                label: "主题样式",
                children: <NodeStyle />,
              },
            ]}
          />
        )}
        {/* 节点属性 */}
        {rightToobarActive === "attrs" && (
          <Tabs
            items={[
              {
                key: "1",
                label: "节点属性",
                children: (
                  <NodeAttrs cell={firstNode} onChange={handleSetNodeAttr} />
                ),
              },
            ]}
          />
        )}
        {/* 结构 */}
        {rightToobarActive === "structure" && <Structure />}
        {/* 风格 */}
        {rightToobarActive === "theme" && <Theme />}
        {/* 图标 */}
        {rightToobarActive === "icon" && <IconConfig />}
        {/* 标签 */}
        {rightToobarActive === "tag" && <TagConfig />}
        {/* 备注 */}
        {rightToobarActive === "remark" && <Remark />}
        {/* AI对话 */}
        {rightToobarActive === "ai-chat" && (
          <AIChat
            graphType="mindmap"
            onClose={handleCloseAI}
            onInsert={handleAiCreated}
          />
        )}
        {/* AI创作 */}
        {rightToobarActive === "ai-creator" && (
          <AICreator
            type="mindmap"
            onClose={handleCloseAI}
            onChange={handleAiCreated}
          />
        )}
      </div>
    </div>
  );
}
