first commit

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

@@ -0,0 +1,163 @@
+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 {
+  zoneUuid: 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.zoneUuid,
+        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;