import { Content, Footer, Header } from "antd/es/layout/layout";
import "./layout.less";
import { inject, observer } from "mobx-react";
import { Store } from "antd/es/form/interface";
import { useEffect, useState } from "react";
import { Avatar, Breadcrumb, Layout, Menu, theme } from "antd";
import { UserOutlined } from "@ant-design/icons";
import Sider from "antd/es/layout/Sider";
import { items } from "./layout_config";
import { Dropdown } from "antd/lib";
import { Outlet, useNavigate } from "react-router";
const LayOut = (props: Store) => {
  const { usrStore } = props;
  const [collapsed, setCollapsed] = useState(false);
  const nav = useNavigate();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const headStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
  };
  const logoStyle = { width: 60, color: "white" };
  useEffect(() => {
    // if (usrStore.isNeedLogin) {
    //   nav("/login");
    // }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [usrStore.isNeedLogin]);

  return (
    <Layout>
      <Header style={headStyle}>
        <div style={logoStyle}>logo</div>
        <Dropdown menu={{ items }}>
          <Avatar icon={<UserOutlined />} />
        </Dropdown>
      </Header>
      <Layout>
        <Sider
          width={150}
          style={{ background: colorBgContainer }}
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <Menu
            mode="inline"
            theme="dark"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
            items={items}
            onClick={(e) => {
              console.log(e);
              nav(e.key);
            }}
          />
        </Sider>
        <Layout style={{ padding: "0 15px 15px" }}>
          <Breadcrumb
            items={[{ title: "Home" }, { title: "List" }, { title: "App" }]}
            style={{ margin: "10px 0" }}
          />
          <Content
            style={{
              padding: 12,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default inject("usrStore")(observer(LayOut));
