// import { useEffect } from "react";
// import {
//     useObjectPosition,
//     useObjectRotation,
//     useSelectedWallItem,
//     useSocketStore,
//     useWallItems,
//     useSelectedItem,
//     useToolMode,
// } from "../../../store/builder/store";
// import { Csg } from "../csg/csg";
// import * as Types from "../../../types/world/worldTypes";
// import * as CONSTANTS from "../../../types/world/worldConstants";
// import * as THREE from "three";
// import { useThree } from "@react-three/fiber";
// import handleMeshMissed from "../eventFunctions/handleMeshMissed";
// import DeleteWallItems from "../geomentries/walls/deleteWallItems";
// import loadInitialWallItems from "../IntialLoad/loadInitialWallItems";
// import AddWallItems from "../geomentries/walls/addWallItems";
// import useModuleStore from "../../../store/useModuleStore";
// import { useParams } from "react-router-dom";
// import { getUserData } from "../../../functions/getUserData";
// import { useVersionContext } from "../version/versionContext";

// const WallItemsGroup = ({
//     currentWallItem,
//     hoveredDeletableWallItem,
//     selectedItemsIndex,
//     setSelectedItemsIndex,
//     CSGGroup,
// }: any) => {
//     const state = useThree();
//     const { socket } = useSocketStore();
//     const { pointer, camera, raycaster } = state;
//     const { toolMode } = useToolMode();
//     const { wallItems, setWallItems } = useWallItems();
//     const { setObjectPosition } = useObjectPosition();
//     const { setObjectRotation } = useObjectRotation();
//     const { setSelectedWallItem } = useSelectedWallItem();
//     const { activeModule } = useModuleStore();
//     const { selectedItem } = useSelectedItem();
//     const { selectedVersionStore } = useVersionContext();
//     const { selectedVersion } = selectedVersionStore();
//     const { projectId } = useParams();
//     const { userId, organization } = getUserData();

//     useEffect(() => {
//         // Load Wall Items from the backend
//         if (!projectId || !selectedVersion) return;
//         loadInitialWallItems(setWallItems, projectId, selectedVersion?.versionId);
//     }, [selectedVersion?.versionId]);

//     //////////  Update the Position value changes  in the selected item  //////////

//     useEffect(() => {
//         const canvasElement = state.gl.domElement;
//         function handlePointerMove(e: any) {
//             if (selectedItemsIndex !== null && toolMode === 'cursor' && e.buttons === 1) {
//                 const Raycaster = state.raycaster;
//                 const intersects = Raycaster.intersectObjects(CSGGroup.current?.children[0].children!, true);
//                 const Object = intersects.find((child) => child.object.name.includes("WallRaycastReference"));

//                 if (Object) {
//                     (state.controls as any)!.enabled = false;
//                     setWallItems((prevItems: any) => {
//                         const updatedItems = [...prevItems];
//                         let position: [number, number, number] = [0, 0, 0];

//                         if (updatedItems[selectedItemsIndex].type === "fixed-move") {
//                             position = [
//                                 Object!.point.x,
//                                 Math.floor(Object!.point.y / CONSTANTS.wallConfig.height) *
//                                 CONSTANTS.wallConfig.height,
//                                 Object!.point.z,
//                             ];
//                         } else if (updatedItems[selectedItemsIndex].type === "free-move") {
//                             position = [Object!.point.x, Object!.point.y, Object!.point.z];
//                         }

//                         requestAnimationFrame(() => {
//                             setObjectPosition(new THREE.Vector3(...position));
//                             setObjectRotation({
//                                 x: THREE.MathUtils.radToDeg(Object!.object.rotation.x),
//                                 y: THREE.MathUtils.radToDeg(Object!.object.rotation.y),
//                                 z: THREE.MathUtils.radToDeg(Object!.object.rotation.z),
//                             });
//                         });

//                         updatedItems[selectedItemsIndex] = {
//                             ...updatedItems[selectedItemsIndex],
//                             position: position,
//                             quaternion: Object!.object.quaternion.clone() as Types.QuaternionType,
//                         };

//                         return updatedItems;
//                     });
//                 }
//             }
//         }

//         async function handlePointerUp() {
//             const Raycaster = state.raycaster;
//             const intersects = Raycaster.intersectObjects(
//                 CSGGroup.current?.children[0].children!,
//                 true
//             );
//             const Object = intersects.find((child) =>
//                 child.object.name.includes("WallRaycastReference")
//             );
//             if (Object) {
//                 if (selectedItemsIndex !== null) {
//                     let currentItem: any = null;
//                     setWallItems((prevItems: any) => {
//                         const updatedItems = [...prevItems];
//                         const WallItemsForStorage = updatedItems.map((item) => {
//                             const { model, ...rest } = item;
//                             return {
//                                 ...rest,
//                                 modelUuid: model?.uuid,
//                             };
//                         });

//                         currentItem = updatedItems[selectedItemsIndex];
//                         localStorage.setItem("WallItems", JSON.stringify(WallItemsForStorage));
//                         return updatedItems;
//                     });

//                     setTimeout(async () => {

//                         //REST

//                         // await setWallItem(
//                         //   organization,
//                         //   currentItem?.model?.uuid,
//                         //   currentItem.modelName,
//                         //   currentItem.assetId,
//                         //   currentItem.type!,
//                         //   currentItem.csgposition!,
//                         //   currentItem.csgscale!,
//                         //   currentItem.position,
//                         //   currentItem.quaternion,
//                         //   currentItem.scale!,
//                         // )

//                         //SOCKET

//                         const data = {
//                             organization,
//                             modelUuid: currentItem.model?.uuid!,
//                             assetId: currentItem.assetId,
//                             modelName: currentItem.modelName!,
//                             type: currentItem.type!,
//                             csgposition: currentItem.csgposition!,
//                             csgscale: currentItem.csgscale!,
//                             position: currentItem.position!,
//                             quaternion: currentItem.quaternion,
//                             scale: currentItem.scale!,
//                             socketId: socket.id,
//                             versionId: selectedVersion?.versionId || '',
//                             projectId,
//                             userId
//                         };

//                         // console.log('data: ', data);
//                         socket.emit("v1:wallItems:set", data);
//                     }, 0);
//                     (state.controls as any)!.enabled = true;
//                 }
//             }
//         }

//         canvasElement.addEventListener("pointermove", handlePointerMove);
//         canvasElement.addEventListener("pointerup", handlePointerUp);

//         return () => {
//             canvasElement.removeEventListener("pointermove", handlePointerMove);
//             canvasElement.removeEventListener("pointerup", handlePointerUp);
//         };
//     }, [selectedItemsIndex, selectedVersion?.versionId]);

//     useEffect(() => {
//         const canvasElement = state.gl.domElement;
//         let drag = false;
//         let isLeftMouseDown = false;

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

//         const onMouseUp = (evt: any) => {
//             if (evt.button === 0) {
//                 isLeftMouseDown = false;
//                 if (!drag && toolMode === '3D-Delete' && activeModule === "builder") {
//                     DeleteWallItems(
//                         hoveredDeletableWallItem,
//                         setWallItems,
//                         wallItems,
//                         socket,
//                         projectId,
//                         selectedVersion?.versionId || '',
//                     );
//                 }
//             }
//         };

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

//         const onDrop = (event: any) => {
//             if (selectedItem.category !== 'Fenestration') return;

//             pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
//             pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

//             raycaster.setFromCamera(pointer, camera);

//             if (selectedItem.id && selectedVersion && projectId) {
//                 if (selectedItem.subCategory) {
//                     AddWallItems(
//                         selectedItem,
//                         raycaster,
//                         CSGGroup,
//                         setWallItems,
//                         socket,
//                         projectId,
//                         selectedVersion?.versionId || '',
//                     );
//                 }
//                 event.preventDefault();
//             }
//         };

//         const onDragOver = (event: any) => {
//             event.preventDefault();
//         };

//         canvasElement.addEventListener("mousedown", onMouseDown);
//         canvasElement.addEventListener("mouseup", onMouseUp);
//         canvasElement.addEventListener("mousemove", onMouseMove);
//         canvasElement.addEventListener("drop", onDrop);
//         canvasElement.addEventListener("dragover", onDragOver);

//         return () => {
//             canvasElement.removeEventListener("mousedown", onMouseDown);
//             canvasElement.removeEventListener("mouseup", onMouseUp);
//             canvasElement.removeEventListener("mousemove", onMouseMove);
//             canvasElement.removeEventListener("drop", onDrop);
//             canvasElement.removeEventListener("dragover", onDragOver);
//         };
//     }, [toolMode, wallItems, selectedItem, camera, selectedVersion?.versionId]);

//     useEffect(() => {
//         if (toolMode && activeModule === "builder") {
//             handleMeshMissed(
//                 currentWallItem,
//                 setSelectedWallItem,
//                 setSelectedItemsIndex
//             );
//             setSelectedWallItem(null);
//             setSelectedItemsIndex(null);
//         }
//     }, [toolMode]);

//     return (
//         <>
//             {wallItems.map((item: Types.WallItem, index: number) => (
//                 <group
//                     key={index}
//                     position={item.position}
//                     quaternion={item.quaternion}
//                     scale={item.scale}
//                 >
//                     <Csg
//                         position={item.csgposition!}
//                         scale={item.csgscale!}
//                         model={item.model!}
//                         hoveredDeletableWallItem={hoveredDeletableWallItem}
//                     />
//                 </group>
//             ))}
//         </>
//     );
// };

// export default WallItemsGroup;