import React 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 { 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 }) => {
  console.log("items: ", items);

  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { subModule, setSubModule } = useSubModuleStore();

  async function handleSelectZone(id: string) {
    setSubModule("zoneProperties")
    const email = localStorage.getItem('email')
    const organization = (email!.split("@")[1]).split(".")[0];
    let response = await getZoneData(id, organization)
    console.log('response: ', response);
    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 || [],
    });

  }
  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;