import React, { useState } from "react"
import {
  Drawer,
  IconButton,
  List,
  ListItem,
  ListItemText,
} from "@material-ui/core"
import ListItemIcon from "@mui/material/ListItemIcon"
import Divider from "@mui/material/Divider"
import MenuRoundedIcon from "@mui/icons-material/MenuRounded"
import InventoryRoundedIcon from "@mui/icons-material/InventoryRounded"
import PeopleOutlineRoundedIcon from "@mui/icons-material/PeopleOutlineRounded"
import LocalMallRoundedIcon from "@mui/icons-material/LocalMallRounded"
import ArticleRoundedIcon from "@mui/icons-material/ArticleRounded"

import { NavLink } from "../assets/styles/styled"
import theme from "../assets/styles/myTheme"

const myPalette = theme.palette

function DrawerComponent() {
  const [openDrawer, setOpenDrawer] = useState(false)
  const [selectedIndex, setSelectedIndex] = useState(1)

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index)
  }

  return (
    <>
      <Drawer open={openDrawer} onClose={() => setOpenDrawer(false)}>
        <List>
          <ListItem
            selected={selectedIndex === 0}
            onClick={(event) => {
              handleListItemClick(event, 0)
              setOpenDrawer(false)
            }}
          >
            <ListItemIcon>
              <InventoryRoundedIcon />
            </ListItemIcon>
            <ListItemText>
              <NavLink href="#">Productos</NavLink>
            </ListItemText>
          </ListItem>

          <ListItem
            selected={selectedIndex === 1}
            onClick={(event) => {
              handleListItemClick(event, 1)
              setOpenDrawer(false)
            }}
          >
            <ListItemIcon>
              <PeopleOutlineRoundedIcon />
            </ListItemIcon>
            <ListItemText>
              <NavLink href="#">Quiénes somos</NavLink>
            </ListItemText>
          </ListItem>

          <ListItem
            selected={selectedIndex === 2}
            onClick={(event) => {
              handleListItemClick(event, 2)
              setOpenDrawer(false)
            }}
          >
            <ListItemIcon>
              <LocalMallRoundedIcon />
            </ListItemIcon>
            <ListItemText>
              <NavLink href="#">Clientes</NavLink>
            </ListItemText>
          </ListItem>

          <ListItem
            selected={selectedIndex === 3}
            onClick={(event) => {
              handleListItemClick(event, 3)
              setOpenDrawer(false)
            }}
          >
            <ListItemIcon>
              <ArticleRoundedIcon />
            </ListItemIcon>
            <ListItemText>
              <NavLink href="#">Blog</NavLink>
            </ListItemText>
          </ListItem>
        </List>
        <Divider />
      </Drawer>

      <IconButton onClick={() => setOpenDrawer(!openDrawer)}>
        <MenuRoundedIcon sx={{ color: myPalette.primary.contrastText }} fontSize="large" />
      </IconButton>
    </>
  )
};

export default DrawerComponent
