import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
import { Menu } from "@mui/icons-material";
import { makeStyles } from "@mui/styles";
import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
import { useThemeType } from "../hooks/useThemeType";
import UserMenu from "../user/UserMenu";
import { useMobile } from "hooks";
import HeaderButtons from "./HeaderButtons";
import { useGlobalState } from "providers";
import SideNavigator from "navigation/SideNavigator";
import { useState } from "react";
import BottomNavigator from "navigation/BottomNavigator";

const useStyles = makeStyles((theme: Theme) => {
  return ({
    appBar: {
			zIndex: theme.zIndex.drawer + 1,
			backgroundImage: "none", // This prevents de-saturation of header in dark mode
			backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
		},
		toolbar: {
			marginLeft: theme.spacing(0.5),
			[theme.breakpoints.up("md")]: {
				marginLeft: theme.spacing(1.5)
			}
		},
		buttonContainer: {
			marginRight: theme.spacing(0.5),
			[theme.breakpoints.up("md")]: {
				marginRight: theme.spacing(1.5)
			},
			color: getSignatureAccentColour() + " !important"
		},
		button: {
			color: getSignatureAccentColour() + " !important"
		},
		hide: {
			display: "none"
		},
		logoContainer: {
			display: "flex",
			alignItems: "center",
			height: "56px",
			justifyContent: "flex-start",
			[theme.breakpoints.up("md")]: {
				height: "64px"
			}
		},
		logoLink: {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			borderRadius: "5px",
			backgroundColor: hasTransparentLogoBG()
				? ""
				: theme.palette.mode === "light"
				? "#fff"
				: "#0000"
		},
		HeaderLogo: {
			objectFit: "cover",
			height: "56px",
			width: "auto",
			padding: theme.spacing(1),
			[theme.breakpoints.up("md")]: {
				height: "64px"
			}
		},
		appBarRight: {
			display: "flex",
			flexDirection: "row",
			marginLeft: theme.spacing(2),
			marginRight: theme.spacing(1),
			[theme.breakpoints.up("md")]: {
				marginLeft: theme.spacing(3),
				marginRight: theme.spacing(2)
			}
		}
  })
});

export default function Header() {

  const themeType = useThemeType();
  const classes = useStyles()
  const isMobile = useMobile();
    
  const [{ user, team }] = useGlobalState();
  const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;

  const [navOpen, setNavOpen] = useState(false)

  return (
    <>
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar disableGutters className={classes.toolbar}>
					<Box className={classes.buttonContainer}>
						{!isMobile && (
							<IconButton
								color="inherit"
								aria-label="Open side menu"
								onClick={() => {setNavOpen(true)}}
								style={{ color: getSignatureAccentColour() }}
								className={classes.button}
							>
								<Menu />
							</IconButton>
						)}
					</Box>
					<Box flexGrow={1} marginLeft={0.5}>
						{!hideLogo() && (
							<div className={classes.logoContainer}>
								<img
									className={classes.HeaderLogo}
									src={themeType === "light" ? getDarkLogo() : getLightLogo()}
									alt={import.meta.env.REACT_APP_WEBSITE_TITLE}
								/>
							</div>
						)}
					</Box>
					<Box className={classes.appBarRight}>
						<UserMenu />
						<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
					</Box>
			</Toolbar>
			</AppBar>
			<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
			{isMobile && <BottomNavigator setNavOpen={isOpen => {setNavOpen(isOpen)}} sideIsOpen={navOpen} />}
    </>
  )
}