"use client";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import NavigationContent from "../NavigationContent";
import React from "react";
import Drawer from "@mui/material/Drawer";
import { Session } from "inspector";
import { authOptions } from "@/config/authConfig";
import { getServerSession } from "next-auth";
export interface SessionWithAbilities extends Session {
  abilities?: string[],
  username?: string
}

interface Props {
  abilities?: string[],
  username?: string
}

const NavigationToggle: React.FC<Props> = ({ abilities, username }) => {
  const [isOpened, setIsOpened] = React.useState(false);

  const openNavigation = () => {
    setIsOpened(true);
  };
  const closeNavigation = () => {
    setIsOpened(false);
  };

  return (
    <>
      <Drawer variant="permanent" sx={{ display: { xs: "none", xl: "block" } }}>
        <NavigationContent abilities={abilities} username={username}/>
      </Drawer>
      <Drawer
        sx={{ display: { xl: "none" } }}
        open={isOpened}
        onClose={closeNavigation}
        ModalProps={{
          keepMounted: true,
        }}
      >
        <NavigationContent abilities={abilities}/>
      </Drawer>
      <IconButton
        sx={{ display: { xl: "none" } }}
        onClick={openNavigation}
        edge="start"
        aria-label="menu"
        color="inherit"
      >
        <MenuIcon fontSize="inherit" />
      </IconButton>
    </>
  );
};

export default NavigationToggle;
