import * as React from "react";
import { Box } from "@mui/material";
import { useNavigate, useLocation } 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 colors = [ 
    "null", 
    theme.palette.golden.main, 
    theme.palette.golden.main, 
    theme.palette.golden.main, 
    theme.palette.golden.main, 
    theme.palette.golden.main, 
    theme.palette.golden.main, 
    theme.palette.golden.main, 
    theme.palette.golden.main ];

  const location = useLocation();
  pages.forEach( (item, i) => {
    if( location.pathname == `/${pages[i]}` )   colors[ i ] = theme.palette.secondary.main
  } );

  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"
          }} onClick={ () => changePage( 1 ) }>
              <PersonOutlineOutlinedIcon sx={{
                color: colors[ 1 ],
                transform: "scale(1.2)"
              }} />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }} onClick={ () => changePage( 2 ) }>
              <SettingsOutlinedIcon sx={{
                color: colors[ 2 ],
                transform: "scale(1.2)"
              }} />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }} onClick={ () => changePage( 3 ) }>
              <BathtubOutlinedIcon sx={{
                color: colors[ 3 ],
                transform: "scale(1.2)"
              }} />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }} onClick={ () => changePage( 4 ) }>
              <AddPhotoAlternateOutlinedIcon sx={{
                color: colors[ 4 ],
                transform: "scale(1.2)"
              }} />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }} onClick={ () => changePage( 5 ) }>
              <NaturePeopleOutlinedIcon sx={{
                color: colors[ 5 ],
                transform: "scale(1.2)"
              }} />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }} onClick={ () => changePage( 6 ) }>
              <SettingsIcon sx={{
                color: colors[ 6 ],
                transform: "scale(1.2)"
              }} />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }} onClick={ () => changePage( 7 ) }>
              <CameraIcon sx={{
                color: colors[ 7 ],
                transform: "scale(1.2)"
              }} />
          </Box>
          <Box sx={{
            width: "100%",
            height: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }} onClick={ () => changePage( 8 ) }>
              <HeadsetMicOutlinedIcon sx={{
                color: colors[ 8 ],
                transform: "scale(1.2)"
              }} />
          </Box>
        </Box>

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


export default Menu;