import React from 'react'
import { Box, Divider, Drawer, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useTheme } from '@mui/material'
import { SettingsOutlined, ChevronLeft, ChevronRightOutlined, HomeOutlined, Groups2Outlined, ReceiptLongOutlined, PublicOutlined, 
         TodayOutlined, CalendarMonthOutlined, PieChartOutlined } from '@mui/icons-material'
import CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';
import PlagiarismOutlinedIcon from '@mui/icons-material/PlagiarismOutlined';
import { useLocation, useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import FlexBetween from './FlexBetween'
import ProfileImg from 'assets/admin.jpg'


const navItems = [
    {
        text: "Dashboard",
        icon: <HomeOutlined />
    },
    {
        text: "Client Facing",
        icon: null,
    },
    {
        text: "Products",
        icon: <CategoryOutlinedIcon />
    },
    {
        text: "Customers",
        icon: <Groups2Outlined />
    },
    {
        text: "Transactions",
        icon: <ReceiptLongOutlined />
    },
    {
        text: "Geography",
        icon: <PublicOutlined />
    },
    {
        text: "Sales",
        icon: null,
    },
    {
        text: "Overview",
        icon: <PlagiarismOutlinedIcon />
    },
    {
        text: "Daily",
        icon: <TodayOutlined />
    },
    {
        text: "Monthly",
        icon: <CalendarMonthOutlined />
    },
    {
        text: "Breakdown",
        icon: <PieChartOutlined />
    }, 
]

const Sidebar = ({user, drawerWidth, sidebarOpen, setSidebarOpen, nonMobile,}) => {
    const {pathname} = useLocation();
    const [active, setActive] = useState("");
    const navigate = useNavigate();
    const theme = useTheme();


    useEffect(() => {
        setActive(pathname.substring(1));
    }, [pathname])

  return (
    <Box component="nav">
        {sidebarOpen && (
            <Drawer open={sidebarOpen} onClose={() => setSidebarOpen(false)} variant="persistent" anchor="left" 
                sx={{width: drawerWidth, "& .MuiDrawer-paper" : {
                    color: theme.palette.secondary[200],
                    backgroundColor: theme.palette.background.alt,
                    boxSizing: "border-box",
                    borderWidth: nonMobile ? 0 : "2px",
                    width: drawerWidth
            }}}>
                <Box width="100%">
                    <Box m="1.5rem 2rem 2rem 3rem">
                        <FlexBetween color={theme.palette.secondary.main}>
                            <Box display="flex" alignItems="center" gap="0.5rem">
                                <Typography variant='h5' fontWeight="bold">
                                    Analytics Dashboard
                                </Typography>
                            </Box>
                            {!nonMobile && (
                                <IconButton onClick={() => setSidebarOpen(!sidebarOpen)}>
                                    <ChevronLeft />
                                </IconButton>
                            )}
                        </FlexBetween>
                    </Box>
                    <List>
                        {navItems.map(({text, icon}) => {
                            if(!icon){
                                return(
                                    <Typography key={text} sx={{m:"2.25rem 0 1rem 3rem"}}>
                                        {text}
                                    </Typography>
                                )
                            }
                            const lowerCaseText = text.toLowerCase();

                            return(
                                <ListItem key={text} disablePadding>
                                    <ListItemButton onClick={() => {
                                        navigate(`/${lowerCaseText}`); 
                                        setActive(lowerCaseText);}} 
                                        sx={{
                                            backgroundColor: active === lowerCaseText ? theme.palette.secondary[300] : "transparent", 
                                            color: active === lowerCaseText ? theme.palette.primary[500] : theme.palette.secondary[100],}}>
                                        <ListItemIcon sx={{ml: "2rem", color: active === lowerCaseText ? theme.palette.primary[500] : theme.palette.secondary[200],}}>
                                            {icon}
                                        </ListItemIcon>
                                        <ListItemText primary={text} />
                                        {active === lowerCaseText && (
                                            <ChevronRightOutlined sx={{ml: "auto"}} />
                                        )}
                                    </ListItemButton>
                                </ListItem>
                            );
                        })}
                    </List>
                </Box>
                <Box position="absolute" bottom="2rem">
                    <Divider />
                    <FlexBetween textTransform="none" gap="0.8rem" m="1.5rem 2rem 0 2rem">
                        <Box component="img" alt="profile" src={ProfileImg} height="35px" width="35px" borderRadius="50%" sx={{objectFit: "cover"}} />
                            <Box textAlign="left">
                                <Typography fontWeight="bold" fontSize="1rem" sx={{color: theme.palette.secondary[100]}}>
                                    {user.name}
                                </Typography>
                                <Typography  fontSize="0.7rem" sx={{color: theme.palette.secondary[200]}}>
                                    {user.occupation}
                                </Typography>
                            </Box>
                        <SettingsOutlined  sx={{color: theme.palette.secondary[300], fontSize: '25px'}}/>
                    </FlexBetween>
                </Box>
            </Drawer>
        )}
    </Box>
  )
}

export default Sidebar