import React from "react";
import {
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Collapse,
  List,
  Tooltip,
} from "@mui/material";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import { MenuItem } from "./MenuItem";

export const CollapsibleMenuSection = React.memo(
  ({
    icon,
    text,
    tooltip,
    open,
    isExpanded,
    onToggle,
    items = [],
    onItemClick,
    onClose,
  }) => {
    const header = (
      <ListItemButton onClick={onToggle}>
        <ListItemIcon>{icon}</ListItemIcon>
        <ListItemText primary={text} />
        {isExpanded ? <ExpandLess /> : <ExpandMore />}
      </ListItemButton>
    );

    return (
      <>
        {tooltip && !open ? (
          <Tooltip title={tooltip} placement="left-start">
            {header}
          </Tooltip>
        ) : (
          header
        )}
        <Collapse
          fullWidth
          in={isExpanded}
          timeout="auto"
          unmountOnExit
          style={{
            width: "100%",
            boxShadow: "inset 0 0 5px gray",
          }}
        >
          <List component="div" disablePadding>
            {items.map((item, index) => (
              <MenuItem
                key={index}
                {...item}
                open={open}
                onClose={onClose}
                onClick={onItemClick}
              />
            ))}
          </List>
        </Collapse>
      </>
    );
  }
);

CollapsibleMenuSection.displayName = "CollapsibleMenuSection";
