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,
  MenuProps,
  theme,
  Image,
} 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";
import logo from "@/static/favicon.png";
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: 140, color: "white",display:"flex" };
  const contentstyle = {
    padding: 12,
    margin: 0,
    minHeight: 280,
    background: colorBgContainer,
    borderRadius: borderRadiusLG,
    
  };
  const breadItem = [
    { title: "首页" },
    { title: "数据集管理" },
    { title: "数据管理" },
  ];
  useEffect(() => {
    if (usrStore.isNeedLogin) {
      nav("/login");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [usrStore.isNeedLogin]);

  return (
    <Layout>
      <Header style={headStyle}>
        <div style={logoStyle}>
          <Image src={logo} style={{ width: 40, height: 40,marginRight:10 ,borderRadius:10 }} />
          <span>侬浓深情</span>
        </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 ,overflowY:"auto"}}
            items={items}
            onClick={(e) => {
              nav(e.key);
            }}
          />
        </Sider>
        <Layout style={{ padding: "0 15px 15px" }}>
          <Breadcrumb items={breadItem} style={{ margin: "10px 0" }} />
          <Content style={{...contentstyle,overflowX:"auto"}}>
            <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));