Dwinzo_Demo/app/src/components/ui/list/List.tsx

import React, { useEffect, useState } from "react";
import RenameInput from "../inputs/RenameInput";

import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
import { getZoneData } from "../../../services/visulization/zone/getZones";
import useModuleStore, {
  useSubModuleStore,
} from "../../../store/useModuleStore";
import {
  ArrowIcon,
  EyeIcon,
  LockIcon,
  RemoveIcon,
} from "../../icons/ExportCommonIcons";
import { useZoneAssetId } from "../../../store/builder/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import { useVersionContext } from "../../../modules/builder/version/versionContext";

interface Asset {
  id: string;
  name: string;
  position?: [number, number, number]; // Proper 3D vector
  rotation?: { x: number; y: number; z: number }; // Proper rotation format
}

interface ZoneItem {
  id: string;
  name: string;
  assets?: Asset[];
  active?: boolean;
}

interface ListProps {
  items?: ZoneItem[];
  remove?: boolean;
}

const List: React.FC<ListProps> = ({ items = [], remove }) => {
  const { activeModule } = useModuleStore();
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { zoneAssetId, setZoneAssetId } = useZoneAssetId();

  const { setSubModule } = useSubModuleStore();
  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
    {}
  );
  const { projectId } = useParams();
  const { assetStore } = useSceneContext();
  const { setName } = assetStore();
  const { organization } = getUserData();
  const { selectedVersionStore } = useVersionContext();
  const { selectedVersion } = selectedVersionStore();
  const { zoneStore } = useSceneContext();
  const { zones, setZoneName } = zoneStore();

  useEffect(() => {
    useSelectedZoneStore.getState().setSelectedZone({
      zoneName: "",
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      zoneUuid: "",
      zoneViewPortTarget: [],
      zoneViewPortPosition: [],
      widgets: [],
    });
  }, [activeModule]);

  useEffect(() => {
    const expanded: Record<string, boolean> = { "unassigned-zone": true };
    if (zones.length > 0) {
      zones.forEach((zone: any) => {
        expanded[zone.zoneUuid] = true;
      });
    }
    setExpandedZones(expanded);
    // eslint-disable-next-line
  }, [zones.length]);

  const toggleZoneExpansion = (zoneUuid: string) => {
    setExpandedZones((prev) => ({
      ...prev,
      [zoneUuid]: !prev[zoneUuid],
    }));
  };

  async function handleSelectZone(id: string) {
    try {
      if (selectedZone?.zoneUuid === id || id === "unassigned-zone") {
        return;
      }

      setSubModule("zoneProperties");

      let response = await getZoneData(
        id,
        organization,
        projectId,
        selectedVersion?.versionId || ""
      );

      if (!response) return;

      setSelectedZone({
        zoneName: response?.zoneName,
        activeSides: response?.activeSides ?? [],
        panelOrder: response?.panelOrder ?? [],
        lockedPanels: response?.lockedPanels ?? [],
        widgets: response?.widgets ?? [],
        zoneUuid: response?.zoneUuid,
        zoneViewPortTarget: response?.viewPortTarget ?? [],
        zoneViewPortPosition: response?.viewPortPosition ?? [],
      });
    } catch (error) {
      echo.error("Failed to select zone");
    }
  }

  function handleAssetClick(asset: Asset) {
    setZoneAssetId(asset);
  }

  async function handleZoneNameChange(newName: string) {
    const isDuplicate = zones.some(
      (zone: any) =>
        zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() &&
        zone.zoneUuid !== selectedZone.zoneUuid
    );

    if (isDuplicate) {
      alert("Zone name already exists. Please choose a different name.");
      return; // DO NOT update state
    }
    const zonesdata = {
      zoneUuid: selectedZone.zoneUuid,
      zoneName: newName,
    };
    const response = await zoneCameraUpdate(
      zonesdata,
      organization,
      projectId,
      selectedVersion?.versionId || ""
    );
    if (response.message === "zone updated") {
      setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
      setZoneName(selectedZone.zoneUuid, newName);
    }
  }

  async function handleZoneAssetName(newName: string) {
    if (zoneAssetId?.id) {
      let response = await setAssetsApi({
        modelUuid: zoneAssetId.id,
        modelName: newName,
        projectId,
      });
      // console.log("response: ", response);

      setName(zoneAssetId.id, response.modelName);
    }
  }
  const checkZoneNameDuplicate = (name: string) => {
    return zones.some(
      (zone: any) =>
        zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() &&
        zone.zoneUuid !== selectedZone.zoneUuid
    );
  };

  useEffect(() => {
    let drag = false;
    let isLeftMouseDown = false;

    const contextClassNames = [
      "list-wrapper",
      "zone-properties-container",
      "list-container",
    ];

    const isOutsideClick = (target: EventTarget | null) => {
      if (!(target instanceof HTMLElement)) return true;
      return !contextClassNames.some((className) =>
        target.closest(`.${className}`)
      );
    };

    const onMouseDown = (evt: MouseEvent) => {
      if (evt.button === 0) {
        isLeftMouseDown = true;
        drag = false;
      }
    };

    const onMouseMove = () => {
      if (isLeftMouseDown) {
        drag = true;
      }
    };

    const onMouseUp = (evt: MouseEvent) => {
      if (evt.button === 0) {
        isLeftMouseDown = false;
        if (drag) return;

        if (isOutsideClick(evt.target)) {
          // Clear selected zone
          setSelectedZone({
            zoneUuid: "",
            zoneName: "",
            activeSides: [],
            panelOrder: [],
            lockedPanels: [],
            widgets: [],
            zoneViewPortTarget: [],
            zoneViewPortPosition: [],
          });
          setZoneAssetId({
            id: "",
            name: "",
          });
          setSubModule("properties");
        }
      }
    };

    if (selectedZone.zoneName! === "" && activeModule === "Builder") {
      document.addEventListener("mousedown", onMouseDown);
      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", onMouseUp);
    }

    return () => {
      document.removeEventListener("mousedown", onMouseDown);
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
    };
    // eslint-disable-next-line
  }, [selectedZone, activeModule]);

  return (
    <>
      {items?.length > 0 ? (
        <ul className="list-wrapper">
          {items?.map((item) => (
            <React.Fragment key={`zone-${item.id}`}>
              <li
                className="list-container"
                onClick={() => {
                  handleSelectZone(item.id);
                  toggleZoneExpansion(item.id);
                }}
              >
                <div
                  className={`list-item ${
                    selectedZone.zoneUuid === item.id ? "active" : ""
                  }`}
                >
                  <div className="zone-header">
                    <button className="value" id="zone-name">
                      <RenameInput
                        value={item.name}
                        onRename={handleZoneNameChange}
                        checkDuplicate={checkZoneNameDuplicate}
                        canEdit={item.id !== "unassigned-zone"}
                      />
                    </button>
                  </div>
                  <div className="options-container">
                    <div className="lock option">
                      <LockIcon isLocked />
                    </div>
                    <div className="visibe option">
                      <EyeIcon isClosed />
                    </div>
                    {remove && (
                      <div className="remove option">
                        <RemoveIcon />
                      </div>
                    )}
                    {item.assets && item.assets.length > 0 && (
                      <button
                        id="expand-btn"
                        className="expand-icon option"
                        onClick={() => toggleZoneExpansion(item.id)}
                      >
                        <ArrowIcon />
                      </button>
                    )}
                  </div>
                </div>
              </li>
              {/* Nested assets list - only shown when expanded */}
              {item.assets &&
                item.assets.length > 0 &&
                expandedZones[item.id] && (
                  <ul className="asset-list">
                    {item.assets.map((asset) => (
                      <li
                        key={`asset-${asset.id}`}
                        className={`list-container asset-item ${
                          zoneAssetId?.id === asset.id ? "active" : ""
                        }`}
                        onClick={() => handleAssetClick(asset)}
                      >
                        <div className="list-item">
                          <button
                            id={`${asset.name}-${asset.id}`}
                            className="value"
                          >
                            <RenameInput
                              value={asset.name}
                              onRename={handleZoneAssetName}
                            />
                          </button>
                          <div className="options-container">
                            <button
                              className="lock option"
                              id="lock-btn"
                              onClick={(e) => {
                                e.stopPropagation();
                              }}
                            >
                              <LockIcon isLocked />
                            </button>
                            <button
                              className="visibe option"
                              id="visible-btn"
                              onClick={(e) => {
                                e.stopPropagation();
                              }}
                            >
                              <EyeIcon isClosed />
                            </button>
                            {remove && (
                              <button
                                className="remove option"
                                id="remove-btn"
                                onClick={(e) => {
                                  e.stopPropagation();
                                }}
                              >
                                <RemoveIcon />
                              </button>
                            )}
                          </div>
                        </div>
                      </li>
                    ))}
                  </ul>
                )}
            </React.Fragment>
          ))}
        </ul>
      ) : (
        <div className="list-wrapper">
          <div className="no-item">No items to display</div>
        </div>
      )}
    </>
  );
};

export default List;