import { mdiMessageTextFast } from "@mdi/js";
import Icon from "@mdi/react";
import LogoutIcon from "@mui/icons-material/Logout";
import MenuIcon from "@mui/icons-material/Menu";
import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import { Avatar } from "@mui/material";
import MuiAppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import Toolbar from "@mui/material/Toolbar";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import * as React from "react";
import { RouterLink } from "../RouterLink";
import { useUserInfo } from "./BaseAuthenticatedPage";
import ThemeSwitcher from "./ThemeSwitcher";

const AppBar = styled(MuiAppBar)(({ theme }) => ({
  borderWidth: 0,
  borderBottomWidth: 1,
  borderStyle: "solid",
  borderColor: (theme.vars ?? theme).palette.divider,
  boxShadow: "none",
  zIndex: theme.zIndex.drawer + 1,
}));

const LogoContainer = styled("div")({
  position: "relative",
  height: 40,
  display: "flex",
  alignItems: "center",
  "& img": {
    maxHeight: 40,
  },
});

export interface DashboardHeaderProps {
  menuOpen: boolean;
  onToggleMenu: (open: boolean) => void;
}

export default function DashboardHeader({
  menuOpen,
  onToggleMenu,
}: DashboardHeaderProps) {
  const user = useUserInfo();

  const handleMenuOpen = React.useCallback(() => {
    onToggleMenu(!menuOpen);
  }, [menuOpen, onToggleMenu]);

  const getMenuIcon = React.useCallback(
    (isExpanded: boolean) => {
      const expandMenuActionText = "Expand";
      const collapseMenuActionText = "Collapse";

      return (
        <Tooltip
          title={`${
            isExpanded ? collapseMenuActionText : expandMenuActionText
          } menu`}
          enterDelay={200}
        >
          <div>
            <IconButton
              size="small"
              aria-label={`${
                isExpanded ? collapseMenuActionText : expandMenuActionText
              } navigation menu`}
              onClick={handleMenuOpen}
            >
              {isExpanded ? <MenuOpenIcon /> : <MenuIcon />}
            </IconButton>
          </div>
        </Tooltip>
      );
    },
    [handleMenuOpen]
  );

  return (
    <AppBar color="inherit" position="absolute" sx={{ displayPrint: "none" }}>
      <Toolbar sx={{ backgroundColor: "inherit", mx: { xs: -0.75, sm: -1 } }}>
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{
            flexWrap: "wrap",
            width: "100%",
          }}
        >
          <Stack direction="row" alignItems="center">
            <Box sx={{ mr: 3 }}>{getMenuIcon(menuOpen)}</Box>
            <RouterLink to="/">
              <Stack direction="row" alignItems="center">
                <LogoContainer>
                  <Icon path={mdiMessageTextFast} size="2em" />
                </LogoContainer>
                <Typography
                  variant="h6"
                  sx={{
                    fontWeight: "700",
                    ml: 1,
                    whiteSpace: "nowrap",
                    lineHeight: 1,
                    display: { xs: "none", sm: "block" },
                  }}
                >
                  MatrixGW
                </Typography>
              </Stack>
            </RouterLink>
          </Stack>

          {/* User avatar */}
          <Stack
            direction="row"
            sx={{
              p: 2,
              gap: 1,
              alignItems: "center",
              borderTop: "1px solid",
              borderColor: "divider",
            }}
          >
            <Avatar
              sizes="small"
              alt={user.info.name}
              sx={{ width: 36, height: 36 }}
            />
            <Box sx={{ mr: "auto", display: { xs: "none", md: "block" } }}>
              <Typography
                variant="body2"
                sx={{ fontWeight: 500, lineHeight: "16px" }}
              >
                {user.info.name}
              </Typography>
              <Typography variant="caption" sx={{ color: "text.secondary" }}>
                {user.info.email}
              </Typography>
            </Box>
            <ThemeSwitcher />
            <Tooltip title="Sign out">
              <IconButton size="small" onClick={user.signOut}>
                <LogoutIcon />
              </IconButton>
            </Tooltip>
          </Stack>
        </Stack>
      </Toolbar>
    </AppBar>
  );
}