import React, { createContext, useEffect, useEffectEvent, useState } from 'react';
import { Layout, theme, Breadcrumb, Button, Space, Tree, type TreeDataNode } from 'antd';
import Graph, { GraphModel } from './components/Graph';
import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
import { useKeysdownStore } from './stores/ArrayStore';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';
import { useGraphLayersTreeStore } from './stores/TreeStore';

const { Header, Content, Sider } = Layout;

const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const [graphLevel, setGraphLevel] = useState<BreadcrumbItemType[]>([])
  const [collapsed, setCollapsed] = useState(true);
  const addKey = useKeysdownStore(state => state.add);
  const removeKey = useKeysdownStore(state => state.remove);
  const onKeydown = useEffectEvent((key: string) => {
    addKey(key);
  });
  const onKeyUp = useEffectEvent((key: string) => {
    removeKey(key);
  })
  document.addEventListener('keydown', (ev) => {
    onKeydown(ev.key)
  });
  document.addEventListener('keyup', (ev) => {
    onKeyUp(ev.key);
  });
  const treeData = useGraphLayersTreeStore(store => store.tree);

  useEffect(() => {
    console.info(treeData);
  }, [treeData])

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed} collapsedWidth={0} style={{
        background: colorBgContainer,
      }}>
        <Header style={{ padding: 0 }}></Header>
        <Tree
          checkable
          treeData={treeData}
          defaultExpandAll={true}
          style={{
            borderRadius: 0
          }}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Space>
            <div style={{ background: '#001529' }}>
              <Button
                type="text"
                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                style={{
                  fontSize: '16px',
                  width: 32,
                  height: 32,
                  color: colorBgContainer,
                }}
              />
            </div>
            <Breadcrumb items={graphLevel} />
          </Space>
        </Header>
        <Content
          style={{
            margin: '8px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: '6px'
          }}
        >
          <Graph setGraphPath={setGraphLevel} />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;