import React from "react";
import AppBar from "@material-ui/core/AppBar";
import {
  createStyles,
  IconButton,
  Toolbar,
  Typography,
} from "@material-ui/core";
import { makeStyles, Theme } from "@material-ui/core/styles";
import { ProfileMenu } from "./ProfileMenu";
import { mainMenuOpen, mainMenuWidth } from "./MainMenu";
import MenuIcon from "@material-ui/icons/Menu";
import { useReactiveVar } from "@apollo/client";
import clsx from "clsx";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    appBar: {
      transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
    },
    appBarShift: {
      width: `calc(100% - ${mainMenuWidth}px)`,
      marginLeft: mainMenuWidth,
      transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    hide: {
      display: "none",
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  })
);

function CustomAppBar(): React.ReactElement {
  const classes = useStyles();
  const open = useReactiveVar(mainMenuOpen);

  return (
    <AppBar
      position="fixed"
      className={clsx(classes.appBar, {
        [classes.appBarShift]: open,
      })}
    >
      <Toolbar>
        <IconButton
          edge="start"
          className={clsx(classes.menuButton, open && classes.hide)}
          color="inherit"
          aria-label="menu"
          onClick={() => mainMenuOpen(true)}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" className={classes.title}>
          Kandimat
        </Typography>
        <ProfileMenu />
      </Toolbar>
    </AppBar>
  );
}

export default CustomAppBar;