Dwinzo_dev/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,
  useZones,
} from "../../../store/builder/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setAssetsApi } from "../../../services/factoryBuilder/assest/floorAsset/setAssetsApi";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
import { useSceneContext } from "../../../modules/scene/sceneContext";

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 { zones, setZones } = useZones();
  const { setSubModule } = useSubModuleStore();
  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
  const { projectId } = useParams();
  const { assetStore } = useSceneContext();
  const { setName } = assetStore();
  const { organization } = getUserData();

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

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

  async function handleSelectZone(id: string) {
    try {
      if (selectedZone?.zoneUuid === id) {
        return;
      }

      setSubModule("zoneProperties");

      let response = await getZoneData(id, organization, projectId);
      setSelectedZone({
        zoneName: response?.zoneName,
        activeSides: response?.activeSides ?? [],
        panelOrder: response?.panelOrder ?? [],
        lockedPanels: response?.lockedPanels ?? [],
        widgets: response?.widgets ?? [],
        zoneUuid: response?.zoneUuid,
        zoneViewPortTarget: response?.viewPortCenter ?? [],
        zoneViewPortPosition: response?.viewPortposition ?? [],
      });
    } catch (error) {
      echo.error("Failed to select zone");
      console.log(error);
    }
  }

  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);
    if (response.message === "zone updated") {
      setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
      setZones((prevZones: any[]) =>
        prevZones.map((zone) =>
          zone.zoneUuid === selectedZone.zoneUuid
            ? { ...zone, zoneName: newName }
            : zone
        )
      );
    }
  }

  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);
    };
  }, [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}
                      />
                    </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" : ""}`}
                      >
                        <div className="list-item">
                          <button
                            id={`${asset.name}-${asset.id}`}
                            className="value"
                            onClick={() => handleAssetClick(asset)}
                          >
                            <RenameInput
                              value={asset.name}
                              onRename={handleZoneAssetName}
                            />
                          </button>
                          <div className="options-container">
                            <button className="lock option" id="lock-btn">
                              <LockIcon isLocked />
                            </button>
                            <button className="visibe option" id="visible-btn">
                              <EyeIcon isClosed />
                            </button>
                            {remove && (
                              <button className="remove option" id="remove-btn">
                                <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;