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

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";

InsertCss(`
  .shalu-tabs-nav {
    padding: 0 16px
  }
`)
export default function index() {
  const { rightToobarActive, selectedCell, rightToolbarActive } = useModel("mindMapModel");
  const [activeKey, setActiveKey] = useState("1");
  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
    });
  }

  return (
    <div className="relative">
      <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 />}
    </div>
  );
}
