import React, { useEffect } from "react";
import RenameInput from "../inputs/RenameInput";
import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";

interface ListProps {
  items?: { id: string; name: string }[]; // Optional array of items to render
  placeholder?: string; // Optional placeholder text
  remove?: boolean;
}

const List: React.FC<ListProps> = ({ items = [], remove }) => {
  const { activeModule, setActiveModule } = useModuleStore();
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { setSubModule } = useSubModuleStore();
  useEffect(() => {
    useSelectedZoneStore.getState().setSelectedZone({
      zoneName: "",
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      zoneId: "",
      zoneViewPortTarget: [],
      zoneViewPortPosition: [],
      widgets: [],
    });
  }, [activeModule]);
  

  async function handleSelectZone(id: string) {
    try {
      // Avoid re-fetching if the same zone is already selected
      if (selectedZone?.zoneId === id) {
        console.log("Zone is already selected:", selectedZone.zoneName);
        return;
      }

      setSubModule("zoneProperties");

      const email = localStorage.getItem("email");
      const organization = email?.split("@")[1]?.split(".")[0] || "";

      let response = await getZoneData(id, organization);

      setSelectedZone({
        zoneName: response?.zoneName,
        activeSides: response?.activeSides || [],
        panelOrder: response?.panelOrder || [],
        lockedPanels: response?.lockedPanels || [],
        widgets: response?.widgets || [],
        zoneId: response?.zoneId,
        zoneViewPortTarget: response?.viewPortCenter || [],
        zoneViewPortPosition: response?.viewPortposition || [],
      });

      console.log("Zone selected:", response?.zoneName);
    } catch (error) {
      console.error("Error selecting zone:", error);
    }
  }

  return (
    <>
      {items.length > 0 ? (
        <ul className="list-wrapper">
          {items.map((item, index) => (
            <li key={index} className="list-container">
              <div className="list-item">
                <div className="value" onClick={() => handleSelectZone(item.id)}>
                  <RenameInput value={item.name} />
                </div>
                <div className="options-container">
                  <div className="lock option">
                    <LockIcon isLocked />
                  </div>
                  <div className="visibe option">
                    <EyeIcon isClosed />
                  </div>
                  {remove && (
                    <div className="remove option">
                      <RmoveIcon />
                    </div>
                  )}
                </div>
              </div>
            </li>
          ))}
        </ul>
      ) : (
        <div className="list-wrapper">
          <div className="no-item">No items to display</div>
        </div>
      )}
    </>
  );
};

export default List;