import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import EggIcon from "@mui/icons-material/Egg";
import { useState } from "react";
import { Grid } from "../../components/grid/Grid";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
import { SPACING } from "../../data/spacing";

export const SidebarMenuItem = () => {
  const [isOpen, setIsOpen] = useState(false);

  //   useEffect(() => {
  //     if (!sidebarState) {
  //       setIsOpen(false);
  //     }
  //   }, [sidebarState]);

  return (
    <>
      <ListItemButton
        onClick={() => {
          // dispatch(DRAWER({ right: false, bottom: false, content: null }));
          // navigate(ROUTE_PROVINCE_HATCHING);
          // closeSidebar();
          setIsOpen(!isOpen);
        }}
      >
        <ListItemIcon>
          <EggIcon />
        </ListItemIcon>
        {isOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowLeftIcon />}
        <ListItemText primary="اطلاعات کشتار" />
      </ListItemButton>
      {isOpen && (
        <Grid
          container
          direction="column"
          gap={SPACING.MEDIUM}
          style={{ marginRight: "40px" }}
        >
          <ListItemButton
            onClick={() => {
              // dispatch(DRAWER({ right: false, bottom: false, content: null }));
              // navigate(ROUTE_PROVINCE_HATCHING);
              // closeSidebar();
              setIsOpen(true);
            }}
          >
            <EggIcon />
            <ListItemText
              primaryTypographyProps={{ variant: "button" }}
              primary="اطلاعات کشتار"
            />
          </ListItemButton>
        </Grid>
      )}
    </>
  );
};
