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, useLocation } from "react-router-dom";
import { Plus } from "lucide-react";

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

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

  const isActive = item.path ? location.pathname.startsWith(item.path) : false;

  const handleClick = () => {
    if (item.id === "all" && !open) {
      onDrawerOpen?.();
    }
    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: open ? 4 : 2.5,
            },
            isActive && {
              backgroundColor: "rgba(0, 0, 0, 0.08)",
              "&:hover": {
                backgroundColor: "rgba(0, 0, 0, 0.12)",
              },
            },
          ]}
        >
          <ListItemIcon
            sx={[
              {
                minWidth: 0,
                justifyContent: "center",
                color: isActive ? "primary.main" : "inherit",
              },
              open
                ? {
                    mr: 3,
                  }
                : {
                    mr: "auto",
                  },
            ]}
          >
            {Icon ? <Icon /> : <Plus />}
          </ListItemIcon>
          <ListItemText
            primary={item.label}
            sx={[
              open
                ? {
                    opacity: 1,
                  }
                : {
                    opacity: 0,
                  },
              isActive && {
                color: "primary.main",
                fontWeight: "bold",
              },
            ]}
          />
          {item.nestedItems &&
            open &&
            (isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />)}
        </ListItemButton>
      </ListItem>
      {item.nestedItems && (
        <Collapse in={isExpanded} 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>
      )}
    </>
  );
};