import { ConfigProvider, Tabs } from "antd";
import React, { useEffect, useState } from "react";
import PageStyle from "./PageStyle";
import GraphStyle from "./GraphStyle";
import NodeAttrs from "./NodeAttrs";
import { useModel } from "umi";
import InsetCss from "insert-css";

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 } = useModel("graphModel");
  const { rightPanelTabActiveKey, setRightPanelTabActiveKey } =
    useModel("appModel");
  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 />
    </ConfigProvider>,
    },
  ];

  useEffect(() => {
    if (selectedCell?.length) {
      setRightPanelTabActiveKey("2");
    } else {
      setRightPanelTabActiveKey("1");
    }
  }, [selectedCell]);

  return (
    <Tabs
      centered
      items={tabItems}
      activeKey={rightPanelTabActiveKey}
      onChange={(key) => setRightPanelTabActiveKey(key)}
    />
  );
}
