import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
import { Menu } from "@mui/icons-material";
import classNames from "classnames";
import { makeStyles } from "@mui/styles";
import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
import { Link } from "react-router-dom";
import { useThemeType } from "../hooks/useThemeType";
import UserMenu from "../user/UserMenu";

const useStyles = makeStyles((theme: Theme) => ({
    appBar: {
        zIndex: theme.zIndex.drawer + 1
    },
    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)
        }
    },
    button: {
        color: getSignatureAccentColour()
    },
    hide: {
        display: "none"
    },
    logoContainer: {
        display: "flex",
        alignItems: "flex-end",
        justifyContent: "flex-start"
    },
    logoLink: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: "5px",
        backgroundColor: hasTransparentLogoBG()
          ? ""
          : theme.palette.mode === "light"
          ? "#fff"
          : "#323232"
    },
    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)
        }
    },
}));

interface Props {
    toggleTheme: () => void;
    sideIsOpen: boolean;
    openSide: () => void;
    // teams: Team[];
    // setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
}

export default function Header(props: Props) {

    const { sideIsOpen, openSide, toggleTheme } = props;

    const themeType = useThemeType();
    const classes = useStyles() 

    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={openSide}
                            className={classNames(classes.button, sideIsOpen && classes.hide)}>
                                <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 toggleTheme={toggleTheme} />
                </Box>
            </Toolbar>
        </AppBar>
    )
}