import * as React from "react";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import List from "@mui/material/List";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import type { NavigationItem } from "../model";
import { useNavigate } from "react-router-dom";

interface NavigationItemProps {
  item: NavigationItem;
  open: boolean;
  onClick?: () => void;
  isNested?: boolean;
}

export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
  item,
  open,
  onClick,
  isNested = false,
}) => {
  const Icon = item.icon;
  const navigate = useNavigate();
  const [isExpanded, setIsExpanded] = React.useState(false);

  const handleClick = () => {
    if (item.nestedItems) {
      setIsExpanded(!isExpanded);
    } else if (onClick) {
      onClick();
    } else if (item.path) {
      navigate(item.path);
    }
  };

  return (
    <>
      <ListItem disablePadding sx={{ display: "block" }}>
        <ListItemButton
          onClick={handleClick}
          sx={[
            {
              minHeight: 48,
              px: 2.5,
            },
            open
              ? {
                  justifyContent: "initial",
                }
              : {
                  justifyContent: "center",
                },
            isNested && {
              pl: 4,
            },
          ]}
        >
          <ListItemIcon
            sx={[
              {
                minWidth: 0,
                justifyContent: "center",
              },
              open
                ? {
                    mr: 3,
                  }
                : {
                    mr: "auto",
                  },
            ]}
          >
            <Icon />
          </ListItemIcon>
          <ListItemText
            primary={item.label}
            sx={[
              open
                ? {
                    opacity: 1,
                  }
                : {
                    opacity: 0,
                  },
            ]}
          />
          {item.nestedItems &&
            open &&
            (isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />)}
        </ListItemButton>
      </ListItem>
      {item.nestedItems && (
        <Collapse in={isExpanded && open} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
            {item.nestedItems.map((nestedItem) => (
              <NavigationItemComponent
                key={nestedItem.id}
                item={nestedItem}
                open={open}
                onClick={nestedItem.onClick}
                isNested={true}
              />
            ))}
          </List>
        </Collapse>
      )}
    </>
  );
};