import { ConfigProvider, Tabs } from "antd";
import { useMemo } from "react";
import PageStyle from "./PageStyle";
import GraphStyle from "./GraphStyle";
import NodeAttrs from "@/components/NodeAttrs";
import { useModel } from "umi";
import InsetCss from "insert-css";
import AIChat from "@/components/ai/AIChat";
import AICreator from "@/components/ai/AiCreator";
import { useDragResize } from "@/hooks/useDragResize";

InsetCss(`
  .shalu-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .shalu-tabs-content-holder {
    flex: 1;
    overflow-y: auto;
  }
  `);
export default function Config() {
  const { selectedCell, handleAddNodeByAi } = useModel("flowchartModel");
  const {
    rightPanelTabActiveKey,
    setRightPanelTabActiveKey,
    activeAI,
    setActiveAI,
    setFlowRightPanelWidth,
    rightPanelOriginalWidth,
  } = useModel("appModel");

  const { dragging, handleMouseDown } = useDragResize(setFlowRightPanelWidth);

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

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

  const handleCloseAI = () => {
    setActiveAI(undefined);
    setFlowRightPanelWidth(rightPanelOriginalWidth);
  };

  const tabItems = [
    {
      key: "1",
      label: `页面样式`,
      children: (
        <ConfigProvider
          componentSize="small"
          theme={{
            token: {
              colorPrimary: "#1890ff",
            },
          }}
        >
          <PageStyle />
        </ConfigProvider>
      ),
    },
    {
      key: "2",
      label: `图形样式`,
      children: (
        <ConfigProvider
          componentSize="small"
          theme={{
            token: {
              colorPrimary: "#1890ff",
            },
          }}
        >
          <GraphStyle />
        </ConfigProvider>
      ),
    },
    {
      key: "3",
      label: `节点属性`,
      children: (
        <ConfigProvider
          componentSize="small"
          theme={{
            token: {
              colorPrimary: "#1890ff",
            },
          }}
        >
          <NodeAttrs cell={firstNode} onChange={handleSetNodeAttr} />
        </ConfigProvider>
      ),
    },
  ];

  return (
    <div className="w-full h-full flex">
      <div
        className="h-full w-4px cursor-e-resize hover:bg-blue flex-shrink-0"
        style={{ backgroundColor: dragging ? "#60a5fa" : "" }}
        onMouseDown={handleMouseDown}
      ></div>
      <div className="flex-1 overflow-hidden">
        {activeAI === "chat" && (
          <AIChat
            graphType="flow"
            onClose={handleCloseAI}
            onInsert={handleAddNodeByAi}
          />
        )}
        {activeAI === "creator" && (
          <AICreator
            type="flow"
            onClose={handleCloseAI}
            onChange={handleAddNodeByAi}
          />
        )}
        <Tabs
          centered
          items={tabItems}
          activeKey={rightPanelTabActiveKey}
          onChange={(key) => setRightPanelTabActiveKey(key)}
          className="w-full"
        />
      </div>
    </div>
  );
}
