import { history, useLocation, useModel } from "@umijs/max";
import PropTypes from "prop-types";
import { useEffect, useState } from "react";
// @mui
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import { Avatar, Box, Button, Drawer, Stack, Typography } from "@mui/material";
// mock
// hooks
import useResponsive from "@/hooks/useResponsive";
// components
import Logo from "@/components/logo";
import NavSection from "@/components/nav-section";
import { doFetch } from "@/utils/doFetch";
import { useRequest } from "ahooks";
import { Scrollbars } from "react-custom-scrollbars";
import navConfig from "./config";

Nav.propTypes = {
  openNav: PropTypes.bool,
  onCloseNav: PropTypes.func,
};

export default function Nav({ openNav, onCloseNav }) {
  const { pathname } = useLocation();

  const isDesktop = useResponsive("up", "lg");

  const [navConfigs, setNavConfigs] = useState(navConfig);

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

  const setnav = (fn) => {
    const res = fn(nav);
    setInitialState((s) => ({
      ...s,
      nav: res,
    }));
  };

  const { data } = useRequest(async () => {
    let res = await doFetch({ url: "/system/message", params: {} });
    let result = {};
    res?.data?.dataList?.map((it, i) => {
      result[it?.menu] = it?.count;
    });
    return result;
  });
  console.log(menuNum);

  useEffect(() => {
    if (!data) {
      return;
    }
    setNavConfigs((s) => {
      let news = navConfig?.map((it) => {
        return {
          ...it,
          children: it?.children?.map((item, i) => {
            const info =
              menuNum?.[item?.key ?? ""] === 0
                ? {}
                : menuNum?.[item?.key ?? ""]
                ? {
                    info: (
                      <div
                        style={{
                          marginRight: 12,
                          backgroundColor: "#ff4800",
                          width: 20,
                          height: 20,
                          textAlign: "center",
                          lineHeight: "20px",
                          color: "#fff",
                          borderRadius: 12,
                          fontSize: 12,
                        }}
                      >
                        {menuNum[item?.key ?? ""]}
                      </div>
                    ),
                  }
                : data[item?.key ?? ""]
                ? {
                    info: (
                      <div
                        style={{
                          marginRight: 12,
                          backgroundColor: "#ff4800",
                          width: 20,
                          height: 20,
                          textAlign: "center",
                          lineHeight: "20px",
                          color: "#fff",
                          borderRadius: 12,
                          fontSize: 12,
                        }}
                      >
                        {data[item?.key]}
                      </div>
                    ),
                  }
                : {};
            return {
              ...item,
              ...info,
            };
          }),
        };
      });
      if (currentUser?.type == 1) {
        return news?.filter((it, i) => {
          return it?.title === "管理中心";
        });
      } else if (currentUser?.type == 2) {
        return news?.filter((it, i) => {
          return it?.title === "教学中心";
        });
      } else {
        return news?.filter((it, i) => {
          return it?.title === "学习中心";
        });
      }
    });
  }, [data, currentUser?.type, menuNum]);

  useEffect(() => {
    if (openNav) {
      onCloseNav();
    }
  }, [pathname]);

  const ifs = nav === 75;

  const renderContent = (
    <Box
      sx={{
        height: 1,
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
      }}
    >
      <Box
        sx={{
          px: 2,
          py: 1.8,
          display: "flex",
          justifyContent: "flex-start",
          alignItems: "center",
          flexDirection: "column",
          gap: 1,
        }}
      >
        <Logo sx={{ width: 60, height: 60 }} />
        {!ifs && (
          <Typography
            component="b"
            sx={{ fontSize: 21, fontWeight: "bold" }}
            noWrap
          >
            精密测量虚拟仿真实训平台
          </Typography>
        )}
      </Box>

      <Box sx={{ px: 1, pb: 1.5, mt: 7 }}>
        <Stack
          alignItems="center"
          spacing={3}
          sx={{ pt: ifs ? 0 : 5, borderRadius: 2, position: "relative" }}
        >
          <Avatar
            src={currentUser?.picUrl ?? DEFAULT_HEAD_IMG}
            sx={{
              width: ifs ? "2.5vw" : "12vw",
              height: ifs ? "2.5vw" : "12vw",
              maxWidth: 100,
              maxHeight: 100,
              position: "absolute",
              top: -46,
              borderRadius: 600,
              cursor: "pointer",
              boxShadow: "0 0 6px #999",
            }}
            onClick={() => {
              history.push("/work/usercenter");
            }}
          />
          {!ifs && (
            <Box sx={{ textAlign: "center" }}>
              <Typography gutterBottom variant="h6" mt={1.2}>
                {currentUser?.name}
              </Typography>
              <Typography variant="body2" sx={{ color: "text.secondary" }}>
                角色:{currentUser?.typeName}
              </Typography>
            </Box>
          )}
        </Stack>
      </Box>

      <Box component={"div"} sx={{ flex: 1, overflow: "hidden" }}>
        <Scrollbars
          thumbMinSize={10}
          autoHide
          style={{
            width: "100%",
            height: "100%",
          }}
          hideTracksWhenNotNeeded
        >
          <NavSection collspan={ifs} data={navConfigs} />
        </Scrollbars>
      </Box>
      <Box
        component={"div"}
        sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
        width="100%"
      >
        <Button
          fullWidth
          size="large"
          sx={{ margin: 1, backgroundColor: "rgba(0,0,0,0.04)", color: "#666" }}
          onClick={() => {
            setnav((s) => {
              if (s === 280) {
                return 75;
              } else {
                return 280;
              }
            });
          }}
        >
          <ChevronLeftIcon
            style={{
              transform: ifs ? "rotate(180deg)" : "rotate(0deg)",
            }}
          />
          <span>{ifs ? "" : "收起"}</span>
        </Button>
      </Box>
    </Box>
  );

  return (
    <Box
      component="nav"
      sx={{
        flexShrink: { lg: 0 },
        width: { lg: nav },
      }}
    >
      {isDesktop ? (
        <Drawer
          open
          variant="permanent"
          PaperProps={{
            sx: {
              width: nav,

              bgcolor: "background.default",
            },
          }}
        >
          {renderContent}
        </Drawer>
      ) : (
        <Drawer
          open={openNav}
          onClose={onCloseNav}
          ModalProps={{
            keepMounted: true,
          }}
          PaperProps={{
            sx: { width: nav, transition: "all 0.4s" },
          }}
        >
          {renderContent}
        </Drawer>
      )}
    </Box>
  );
}