import * as React from "react";
import { Box } from "@mui/material";
import { useNavigate  } from "react-router-dom";
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
import BathtubOutlinedIcon from '@mui/icons-material/BathtubOutlined';
import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined';
import NaturePeopleOutlinedIcon from '@mui/icons-material/NaturePeopleOutlined';
import SettingsIcon from '@mui/icons-material/Settings';
import CameraIcon from '@mui/icons-material/Camera';
import HeadsetMicOutlinedIcon from '@mui/icons-material/HeadsetMicOutlined';
import theme from "../../../theme";


const Menu: React.FC = () =>  {
  const navigate = useNavigate();
  const pages = [ null, "users", "entities", "tariffs", "discounts", "promocode", null, null, "support" ];

  const changePage = (page:number) => { navigate(`/${pages[ page ]}`); }

  return (
    <React.Fragment>
      <Box sx={{
        backgroundColor: theme.palette.menu.main,
        width: "96px",
        height: "100vh",
        borderRight: "1px solid #45494c",
        overflow: "auto"
      }}>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
          <MenuOutlinedIcon sx={{
            transform: "scale(1.4)"
          }} />
        </Box>

        <Box sx={{
          height: "calc( 100vh - 85px )",
          overflowY: "auto",
          '&::-webkit-scrollbar': { 
            display: "none"
          }
        }}>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <PersonOutlineOutlinedIcon sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.2)"
              }} 
              onClick={ () => changePage( 1 ) } />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <SettingsOutlinedIcon sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.2)"
              }}
              onClick={ () => changePage( 2 ) } />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <BathtubOutlinedIcon sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.2)"
              }} 
              onClick={ () => changePage( 3 ) } />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <AddPhotoAlternateOutlinedIcon sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.2)"
              }}
              onClick={ () => changePage( 4 ) } />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <NaturePeopleOutlinedIcon sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.2)"
              }}
              onClick={ () => changePage( 5 ) } />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <SettingsIcon sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.2)"
              }}
              onClick={ () => changePage( 6 ) } />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <CameraIcon sx={{
                transform: "scale(1.2)"
              }}
              onClick={ () => changePage( 7 ) } />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
              <HeadsetMicOutlinedIcon sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.2)"
              }}
              onClick={ () => changePage( 8 ) } />
          </Box>
        </Box>

      </Box>
    </React.Fragment>
  );
}


export default Menu;