import React, { useEffect, useState } from "react"; import List from "./List"; import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons"; import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect"; import { useFloorItems, useZones } from "../../../store/store"; import { useSelectedZoneStore } from "../../../store/useZoneStore"; 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; } const DropDownList: React.FC = ({ 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(defaultOpen); const { zones, setZones } = useZones(); const handleToggle = () => { setIsOpen((prev) => !prev); // Toggle the state }; interface Asset { id: string; name: string; position: [number, number, number]; // x, y, z } 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 [zoneDataList, setZoneDataList] = useState([]); const { floorItems, setFloorItems } = useFloorItems(); 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 = ((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]]) as [number, number][]; const assetsInZone = floorItems .filter((item: any) => { const [x, , z] = item.position; return isPointInsidePolygon([x, z], polygon2D); }) .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, floorItems]); return (
{value}
{showFocusIcon && (
)} {showAddIcon && (
)} {showKebabMenu && (
)}
{isOpen && (
{listType === "default" && } {listType === "outline" && ( <> )}
)}
); }; export default DropDownList;