import React, { useEffect, useState } 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";

InsertCss(`
  .shalu-tabs-nav {
    padding: 0 16px
  }
`)
export default function index() {
  const { rightToobarActive, selectedCell } = useModel("mindMapModel");
  const [activeKey, setActiveKey] = useState("1");
  useEffect(() => {
    if(selectedCell.find(cell => cell.isNode())) {
      setActiveKey("2");
    } else {
      setActiveKey("1");
    }
  }, [selectedCell]);
  return (
    <div>
      {/* 样式 */}
      {rightToobarActive === "style" && (
        <>
          <Tabs
            activeKey={activeKey}
            onChange={(key) => setActiveKey(key)}
            items={[
              {
                key: "1",
                label: "页面样式",
                children: <PageStyle />,
              },
              {
                key: "2",
                label: "主题样式",
                children: <NodeStyle/>,
              },
            ]}
          />
        </>
      )}
      {/* 结构 */}
      {
        rightToobarActive === "structure" && (
          <Structure />
        )
      }
      {/* 风格 */}
      {rightToobarActive === "theme" && <Theme />}
      {/* 图标 */}
      {rightToobarActive === "icon" && <IconConfig />}
      {/* 标签 */}
      {rightToobarActive === "tag" && <TagConfig />}
      {/* 备注 */}
      {rightToobarActive === "remark" && <Remark />}
    </div>
  );
}
