Dwinzo_dev/app/src/components/ui/list/DropDownList.tsx

import React, { useEffect, useState } from "react";
import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
import { useZones } from "../../../store/builder/store";
import { useAssetsStore } from "../../../store/builder/useAssetStore";

interface DropDownListProps {
  value?: string; // Value to display in the DropDownList
  items?: { id: string; name: string }[]; // Items to display in the dropdown list
  showFocusIcon?: boolean; // Determines if the FocusIcon should be displayed
  showAddIcon?: boolean; // Determines if the AddIcon should be displayed
  showKebabMenu?: boolean; // Determines if the KebabMenuList should be displayed
  kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
  defaultOpen?: boolean; // Determines if the dropdown list should be open by default
  listType?: string; // Type of list to display
  remove?: boolean;
}

interface Zone {
  zoneId: string;
  zoneName: string;
  points: [number, number, number][]; // polygon vertices
}
interface ZoneData {
  id: string;
  name: string;
  assets: { id: string; name: string; position?: []; rotation?: {} }[];
}

const DropDownList: React.FC<DropDownListProps> = ({
  value = "Dropdown",
  items = [],
  showFocusIcon = false,
  showAddIcon = true,
  showKebabMenu = true,
  kebabMenuItems = [
    { id: "Buildings", name: "Buildings" },
    { id: "Paths", name: "Paths" },
    { id: "Zones", name: "Zones" },
  ],
  defaultOpen = false,
  listType = "default",
  remove,
}) => {
  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
  const { zones } = useZones();

  const handleToggle = () => {
    setIsOpen((prev) => !prev); // Toggle the state
  };

  const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
  const { assets } = useAssetsStore();

  const isPointInsidePolygon = (
    point: [number, number],
    polygon: [number, number][]
  ) => {
    let inside = false;
    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
      const xi = polygon[i][0],
        zi = polygon[i][1];
      const xj = polygon[j][0],
        zj = polygon[j][1];

      const intersect =
        // eslint-disable-next-line no-mixed-operators
        zi > point[1] !== zj > point[1] &&
        point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi;

      if (intersect) inside = !inside;
    }
    return inside;
  };

  useEffect(() => {
    const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
      const polygon2D = zone.points.map((p: [number, number, number]) => [
        p[0],
        p[2],
      ]);

      const assetsInZone = assets
        .filter((item: any) => {
          const [x, , z] = item.position;
          return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
        })
        .map((item: any) => ({
          id: item.modelUuid,
          name: item.modelName,
          position: item.position,
          rotation: item.rotation,
        }));

      return {
        id: zone.zoneId,
        name: zone.zoneName,
        assets: assetsInZone,
      };
    });

    setZoneDataList(updatedZoneList);
  }, [zones, assets]);

  return (
    <div className="dropdown-list-container">
      {/* eslint-disable-next-line */}
      <div className="head" onClick={handleToggle}>
        <div className="value">{value}</div>
        <div className="options">
          {showFocusIcon && (
            <div className="focus option">
              <FocusIcon />
            </div>
          )}
          {showAddIcon && (
            <div className="add option">
              <AddIcon />
            </div>
          )}
          {showKebabMenu && (
            <div className="kebab-menu option">
              <KebabMenuListMultiSelect items={kebabMenuItems} />
            </div>
          )}
          <button
            id="collapse-btn"
            title="collapse-btn"
            className="collapse-icon option"
            style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
            onClick={handleToggle}
          >
            <ArrowIcon />
          </button>
        </div>
      </div>
      {isOpen && (
        <div className="lists-container">
          {listType === "default" && <List items={items} remove={remove} />}
          {listType === "outline" && (
            <>
              <DropDownList
                value="Buildings"
                showKebabMenu={false}
                showAddIcon={false}
              // items={zoneDataList}
              />
              <DropDownList
                value="Zones"
                showKebabMenu={false}
                showAddIcon={false}
                items={zoneDataList}
              />
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default DropDownList;