import React from "react";
import ZoneItemComponent from "./ZoneItem";
import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
import { useZoneAssetId } from "../../../../store/builder/store";
import { useZoneAssetHandlers } from "../../../../functions/outlineHelpers/useZoneAssetHandlers";
import { useZonesExpansion } from "../../../../functions/outlineHelpers/useZonesExpansion";

const List: React.FC<ListProps> = ({ items = [], remove }) => {
  const { selectedZone } = useSelectedZoneStore();
  const { zoneAssetId } = useZoneAssetId();
  const { expandedZones, toggleZoneExpansion } = useZonesExpansion(items);

  const {
    handleSelectZone,
    handleZoneNameChange,
    handleAssetClick,
    handleZoneAssetName,
  } = useZoneAssetHandlers();

  if (items.length === 0) {
    return (
      <div className="list-wrapper">
        <div className="no-item">No items to display</div>
      </div>
    );
  }

  return (
    <ul className="list-wrapper">
      {items.map((item) => (
        <ZoneItemComponent
          key={item.id}
          item={item}
          remove={remove}
          expanded={expandedZones[item.id]}
          isActive={selectedZone.zoneUuid === item.id}
          activeAssetId={zoneAssetId?.id}
          onSelect={handleSelectZone}
          onRename={handleZoneNameChange}
          onToggleExpand={toggleZoneExpansion}
          onAssetClick={handleAssetClick}
          onAssetRename={handleZoneAssetName}
        />
      ))}
    </ul>
  );
};

export default List;
