import {
  AppstoreOutlined,
  BarChartOutlined,
  CloudOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingFilled,
  TeamOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { Layout, Menu, theme, Dropdown, Tooltip, Avatar, Drawer } from "antd";
import React, { useState } from "react";
import { Outlet, useLocation, history, useOutletContext, useModel } from "umi";
import { doFetch } from "@/utils/doFetch";
import Fade from "react-reveal/Fade";
import Headers from "./components/Header";
import "./index.less";

const { Header, Content, Footer, Sider } = Layout;
const labels = ["报单", "退货单"];
const paths = ["/port", "/report"];
const items = [UserOutlined, VideoCameraOutlined].map((icon, index) => ({
  key: paths[index],
  icon: React.createElement(icon),
  label: labels[index],
}));

const Dashboard = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [broken, setbroken] = useState(false);
  const [open, setopen] = useState(false);
  const {
    token: { colorBgContainer, colorTextBase },
  } = theme.useToken();

  const {
    initialState: { currentUser },
    setInitialState,
  } = useModel("@@initialState");

  const { mode } = useOutletContext();
  const { pathname } = useLocation();

  const MenuDOM = (
    <div
      style={{
        backgroundColor: mode === "light" ? "#f5f5f5" : "rgba(255,255,255,0.1)",
        margin: 24,
        marginRight: 0,
        padding: 12,
        borderRadius: 12,
        height: "calc(100% - 48px)",
        color: colorTextBase,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div
        className="centerl"
        style={{
          padding: "0px 0px 16px 6px",
          paddingLeft: !collapsed ? 6 : 12,
        }}
      >
        <img
          src="./logo.png"
          alt=""
          style={{
            width: 28,
            marginRight: 10,
          }}
          onClick={() => {
            history.push("/");
          }}
        />
        <div
          className="centerl"
          style={{
            flex: 1,
            overflow: "hidden",
            height: 40,
            opacity: !collapsed ? 1 : 0,
            fontSize: 16,
            fontWeight: "bold",
            color: colorTextBase,
          }}
        >
          <Fade duration={400} left cascade when={!collapsed}>
            健康监测系统
          </Fade>
        </div>
      </div>

      <div style={{ flex: 1 }}>
        <Menu
          theme={mode}
          mode="inline"
          selectedKeys={[pathname]}
          items={items}
          style={{
            background: "transparent",
          }}
          onClick={(e) => {
            history.push(e.key);
          }}
          inlineIndent={12}
        />
      </div>
      <div
        className="spread"
        style={{
          width: "100%",
          padding: 8,
          flexDirection: collapsed && !open ? "column" : "row",
        }}
      >
        <Tooltip title="退出登录" placement="right">
          <div
            className="sorts"
            style={{
              "--color":
                mode === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
            }}
            onClick={() => {
              doFetch({ url: "/webtool/logout", params: {} }).then((res) => {
                localStorage.removeItem("TOKENES");
                history.push("/user/login");
              });
            }}
          >
            <LogoutOutlined style={{ fontSize: 18, color: "#ff4800" }} />
          </div>
        </Tooltip>
        <div style={{ marginTop: collapsed ? 14 : 0 }}>
          <div
            className="sorts"
            style={{
              "--color":
                mode === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
            }}
          >
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: () => setCollapsed(!collapsed),
              }
            )}
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <Layout
      hasSider
      className="contained"
      style={{
        "--bgcolor": mode === "light" ? "#fff" : "rgba(255,255,255,0.1)",
      }}
    >
      <Drawer
        title={null}
        open={open}
        onClose={() => {
          setopen(false);
        }}
        placement="left"
        zIndex={99999}
        closable={false}
        maskClosable={true}
        width={260}
        getContainer={false}
      >
        {MenuDOM}
      </Drawer>
      <Sider
        breakpoint="lg"
        onBreakpoint={(broken) => {
          setCollapsed(broken);
          setbroken(broken);
        }}
        style={{
          overflow: "auto",
          height: "100vh",
          background: colorBgContainer,
          "--width": broken ? 0 : 100,
        }}
        trigger={null}
        collapsible
        collapsed={collapsed}
        collapsedWidth={broken ? 0 : 100}
        theme={mode}
      >
        {!broken && MenuDOM}
      </Sider>
      <Layout style={{ background: colorBgContainer }}>
        <Headers currentUser={currentUser} broken={broken}>
          <img
            src="./logo.png"
            alt=""
            style={{
              width: 28,
              marginRight: 10,
            }}
            onClick={() => {
              history.push("/");
            }}
          />
          <div
            className="sorts"
            style={{
              "--color":
                mode === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
            }}
          >
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: () => setopen(!open),
              }
            )}
          </div>
        </Headers>
        <Content
          style={{
            flex: 1,
            overflow: "auto",
            padding: 12,
            paddingTop: 0,
            background: colorBgContainer,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Dashboard;