import { AccountTree, BarChart, Category, Close, FmdGood, GppGood, Inventory, LocalGroceryStoreTwoTone, LocalMall, PeopleAlt, ShoppingBasket } from "@mui/icons-material"
import { Box, Button, Divider, Drawer, IconButton, InputAdornment, List, ListItem, ListItemButton, ListItemIcon, ListItemText, TextField, Typography } from "@mui/material"
import { lightGreen } from "@mui/material/colors"
import { useDispatch, useSelector } from "react-redux"
import { Link, useNavigate } from "react-router-dom"
import { setCloseAdminMenu } from "../../store/adminMenuSlice"


const AdminMenu = (props) => {

    const adminMenuIsOpen = (useSelector(state => state.adminMenu.isOpen))
    console.log('adminMenuIsOpen', adminMenuIsOpen)
    const dispatch = useDispatch()
    const navigate = useNavigate()

    return (
        <Drawer
            anchor="left"
            open={adminMenuIsOpen}
            onClose={() => dispatch(setCloseAdminMenu())}
            sx={{ position: "relative" }}
        >
            <Box sx={{ minWidth: "320px" }}>
                <Box display={"flex"} justifyContent={"end"} mt={0.5} mb={0.5}>
                    <IconButton size="small" onClick={() => dispatch(setCloseAdminMenu())}>
                        <Close fontSize="small" />
                    </IconButton>
                </Box>
                <List sx={{
                    zIndex: 1,

                }}>
                    <ListItem >
                    <ListItemButton onClick={() => navigate('/admin')}>
                        <ListItemIcon >
                            <BarChart />
                        </ListItemIcon>
                        <ListItemText primary="Статистика" />
                        </ListItemButton>
                    </ListItem>
                    <ListItem >
                    <ListItemButton onClick={() => navigate('/admin/orders')}>
                        <ListItemIcon >
                            <ShoppingBasket />
                        </ListItemIcon>
                        <ListItemText primary="Заказы" />
                        </ListItemButton>
                    </ListItem>
                    
                    <ListItem >
                    <ListItemButton onClick={() => navigate('/admin/goods')}>
                        <ListItemIcon >
                            <Inventory />
                        </ListItemIcon>
                        <ListItemText primary="Товары" />
                        </ListItemButton>
                    </ListItem>
                    <ListItem >
                    <ListItemButton onClick={() => navigate('/admin/categories')}>
                        <ListItemIcon >
                            <AccountTree />
                        </ListItemIcon>
                        <ListItemText primary="Категории" />
                        </ListItemButton>
                    </ListItem>
                    <ListItem >
                    <ListItemButton onClick={() => navigate('/admin/users')}>
                        <ListItemIcon >
                            <PeopleAlt />
                        </ListItemIcon>
                        <ListItemText primary="Клиенты" />
                        </ListItemButton>
                    </ListItem>
                </List>
            </Box>

        </Drawer>
    )
}

export default AdminMenu