Dwinzo_dev/app/src/components/ui/componets/Dropped3dWidget.tsx

import { useThree } from "@react-three/fiber";
import React, { useEffect, useRef } from "react";
import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
import useModuleStore from "../../../store/useModuleStore";
import { ThreeState } from "../../../types/world/worldTypes";
import * as THREE from "three";
import Throughput from "../../layout/3D-cards/cards/Throughput";
import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity";
import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment";
import StateWorking from "../../layout/3D-cards/cards/StateWorking";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { generateUniqueId } from "../../../functions/generateUniqueId";
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
import { use3DWidget } from "../../../store/useDroppedObjectsStore";
import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
import { useWidgetStore } from "../../../store/useWidgetStore";
import EditWidgetOption from "../menu/EditWidgetOption";
import { delete3dWidgetApi } from "../../../services/realTimeVisulization/zoneData/delete3dWidget";
import { update3dWidget, update3dWidgetRotation } from "../../../services/realTimeVisulization/zoneData/update3dWidget";
type WidgetData = {
    id: string;
    type: string;
    position: [number, number, number];
    rotation?: [number, number, number];
    tempPosition?: [number, number, number];
};


export default function Dropped3dWidgets() {
    const { widgetSelect } = useAsset3dWidget();
    const { activeModule } = useModuleStore();
    const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
    const { widgetSubOption } = useWidgetSubOption();
    const { selectedZone } = useSelectedZoneStore();
    const { top, setTop } = useTopData();
    const { left, setLeft } = useLeftData();
    const { rightSelect, setRightSelect } = useRightSelected();
    const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
    const { setWidgets3D } = use3DWidget();
    const { visualizationSocket } = useSocketStore();
    const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
    const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
    const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
    const planeIntersect = useRef(new THREE.Vector3());

    const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
    const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });


    useEffect(() => {
        if (activeModule !== "visualization") return;
        if (!selectedZone.zoneId) return;

        const email = localStorage.getItem("email") || "";
        const organization = email?.split("@")[1]?.split(".")[0];

        async function get3dWidgetData() {
            const result = await get3dWidgetZoneData(selectedZone.zoneId, organization);

            setWidgets3D(result);

            const formattedWidgets = result.map((widget: WidgetData) => ({
                id: widget.id,
                type: widget.type,
                position: widget.position,
                rotation: widget.rotation || [0, 0, 0],
            }));


            setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
        }

        get3dWidgetData();
    }, [selectedZone.zoneId, activeModule]);

    useEffect(() => {
        if (activeModule !== "visualization") return;
        if (widgetSubOption === "Floating" || widgetSubOption === "2D") return;
        if (selectedZone.zoneName === "") return;

        const canvasElement = gl.domElement;

        const handleDragEnter = (event: DragEvent) => {
            event.preventDefault();
            event.stopPropagation();
            console.log("Drag enter");

        };

        const handleDragOver = (event: DragEvent) => {
            event.preventDefault();
            event.stopPropagation();

        };

        const handleDragLeave = (event: DragEvent) => {
            event.preventDefault();
            event.stopPropagation();
            console.log("Drag leave");
            // Remove visual feedback
            canvasElement.style.cursor = "";
        };

        const onDrop = async (event: DragEvent) => {
            event.preventDefault();
            event.stopPropagation();
            canvasElement.style.cursor = ""; // Reset cursor

            const email = localStorage.getItem("email") || "";
            const organization = email?.split("@")[1]?.split(".")[0];
            if (!widgetSelect.startsWith("ui")) return;
            const group1 = scene.getObjectByName("itemsGroup");
            if (!group1) return;

            // Update raycaster with current mouse position
            const rect = canvasElement.getBoundingClientRect();
            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);

            const intersects = raycaster.intersectObjects(scene.children, true).filter(
                (intersect) =>
                    !intersect.object.name.includes("Roof") &&
                    !intersect.object.name.includes("agv-collider") &&
                    !intersect.object.name.includes("MeasurementReference") &&
                    !intersect.object.userData.isPathObject &&
                    !(intersect.object.type === "GridHelper")
            );

            if (intersects.length > 0) {
                const { x, y, z } = intersects[0].point;
                const newWidget: WidgetData = {
                    id: generateUniqueId(),
                    type: widgetSelect,
                    position: [x, y, z],
                    rotation: [0, 0, 0],
                };

                const add3dWidget = {
                    organization: organization,
                    widget: newWidget,
                    zoneId: selectedZone.zoneId
                };

                if (visualizationSocket) {
                    visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
                }

                addWidget(selectedZone.zoneId, newWidget);
            }
        };

        // Add all event listeners
        // canvasElement.addEventListener("dragenter", handleDragEnter);
        // canvasElement.addEventListener("dragover", handleDragOver);
        // canvasElement.addEventListener("dragleave", handleDragLeave);
        canvasElement.addEventListener("drop", onDrop);

        return () => {
            // // Clean up all event listeners
            // canvasElement.removeEventListener("dragenter", handleDragEnter);
            // canvasElement.removeEventListener("dragover", handleDragOver);
            // canvasElement.removeEventListener("dragleave", handleDragLeave);
            canvasElement.removeEventListener("drop", onDrop);
            canvasElement.style.cursor = ""; // Ensure cursor is reset
        };
    }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption, gl.domElement, scene, raycaster, camera]);
    const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];

    useEffect(() => {
        if (!rightClickSelected) return;
        const email = localStorage.getItem("email") || "";
        const organization = email?.split("@")[1]?.split(".")[0];

        if (rightSelect === "Duplicate") {
            async function duplicateWidget() {
                const widgetToDuplicate = activeZoneWidgets.find((w: WidgetData) => w.id === rightClickSelected);
                if (!widgetToDuplicate) return;
                const newWidget: WidgetData = {
                    id: generateUniqueId(),
                    type: widgetToDuplicate.type,
                    position: [
                        widgetToDuplicate.position[0] + 0.5,
                        widgetToDuplicate.position[1],
                        widgetToDuplicate.position[2] + 0.5,
                    ],
                    rotation: widgetToDuplicate.rotation || [0, 0, 0],
                };
                const adding3dWidget = {
                    organization: organization,
                    widget: newWidget,
                    zoneId: selectedZone.zoneId
                };
                if (visualizationSocket) {
                    visualizationSocket.emit("v2:viz-3D-widget:add", adding3dWidget);
                }
                // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
                // 

                addWidget(selectedZone.zoneId, newWidget);
                setRightSelect(null);
                setRightClickSelected(null);
            }
            duplicateWidget()
        }

        if (rightSelect === "Delete") {
            const deleteWidgetApi = async () => {
                try {
                    const deleteWidget = {
                        organization,
                        id: rightClickSelected,
                        zoneId: selectedZone.zoneId,
                    };


                    if (visualizationSocket) {
                        visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
                    }
                    // Call the API to delete the widget
                    // const response = await delete3dWidgetApi(selectedZone.zoneId, organization, rightClickSelected);
                    setZoneWidgetData(
                        selectedZone.zoneId,
                        activeZoneWidgets.filter((w: WidgetData) => w.id !== rightClickSelected)
                    );
                } catch (error) {

                } finally {
                    setRightClickSelected(null);
                    setRightSelect(null);
                }
            };

            deleteWidgetApi();
        }
    }, [rightSelect, rightClickSelected]);

    useEffect(() => {

        const email = localStorage.getItem("email") || "";
        const organization = email?.split("@")[1]?.split(".")[0];
        const handleMouseDown = (event: MouseEvent) => {
            if (!rightClickSelected || !rightSelect) return;

            if (rightSelect === "RotateX" || rightSelect === "RotateY") {
                mouseStartRef.current = { x: event.clientX, y: event.clientY };

                const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
                    zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
                );

                if (!selectedZone) return;

                const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
                if (selectedWidget) {
                    rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
                }
            }
        };

        const handleMouseMove = (event: MouseEvent) => {
            if (!rightClickSelected || !rightSelect) return;
            const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
                zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
            );
            if (!selectedZone) return;

            const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
            if (!selectedWidget) return;

            const rect = gl.domElement.getBoundingClientRect();
            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);

            if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
                const newPosition: [number, number, number] = [
                    planeIntersect.current.x,
                    selectedWidget.position[1],
                    planeIntersect.current.z
                ];
                updateWidgetPosition(selectedZone, rightClickSelected, newPosition);

            }

            if (rightSelect === "Vertical Move") {
                if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
                    updateWidgetPosition(selectedZone, rightClickSelected, [
                        selectedWidget.position[0],
                        planeIntersect.current.y,
                        selectedWidget.position[2]
                    ]);
                }
            }

            if (rightSelect === "RotateX") {
                const deltaX = event.clientX - mouseStartRef.current.x;
                const rotationSpeed = 0.03;
                const newRotation: [number, number, number] = [
                    rotationStartRef.current[0] + deltaX * rotationSpeed,
                    rotationStartRef.current[1],
                    rotationStartRef.current[2]
                ];
                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
            }

            if (rightSelect === "RotateY") {
                const deltaY = event.clientY - mouseStartRef.current.y;
                const rotationSpeed = 0.03;
                const newRotation: [number, number, number] = [
                    rotationStartRef.current[0],
                    rotationStartRef.current[1] + deltaY * rotationSpeed,
                    rotationStartRef.current[2]
                ];
                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
            }
            if (rightSelect === "RotateZ") {
                const deltaX = event.movementX;
                const rotationSpeed = 0.03;
                const currentRotation = selectedWidget.rotation || [0, 0, 0];
                const newRotation: [number, number, number] = [
                    currentRotation[0],
                    currentRotation[1],
                    currentRotation[2] + deltaX * rotationSpeed
                ];
                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
            }

        };

        const handleMouseUp = () => {
            if (!rightClickSelected || !rightSelect) return;
            const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
                zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
            );
            if (!selectedZone) return;

            const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
            if (!selectedWidget) return;
            // Format values to 2 decimal places
            const formatValues = (vals: number[]) => vals.map(val => parseFloat(val.toFixed(2)));
            if (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move") {
                let lastPosition = formatValues(selectedWidget.position) as [number, number, number];
                // (async () => {
                //     let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition);
                //     
                //     if (response) {
                //         
                //     }
                // })();
                let updatingPosition = {
                    organization: organization,
                    zoneId: selectedZone,
                    id: rightClickSelected,
                    position: lastPosition,
                }
                if (visualizationSocket) {
                    visualizationSocket.emit("v2:viz-3D-widget:modifyPositionRotation", updatingPosition);
                }

            }
            else if (rightSelect.includes("Rotate")) {
                const rotation = selectedWidget.rotation || [0, 0, 0];

                let lastRotation = formatValues(rotation) as [number, number, number];
                // (async () => {
                //     let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastRotation);
                //     
                //     if (response) {
                //         
                //     }
                // })();
                let updatingRotation = {
                    organization: organization,
                    zoneId: selectedZone,
                    id: rightClickSelected,
                    rotation: lastRotation,
                }
                if (visualizationSocket) {
                    visualizationSocket.emit("v2:viz-3D-widget:modifyPositionRotation", updatingRotation);
                }
            }

            // Reset selection
            setTimeout(() => {
                setRightClickSelected(null);
                setRightSelect(null);
            }, 50);
        };
        window.addEventListener("mousedown", handleMouseDown);
        window.addEventListener("mousemove", handleMouseMove);
        window.addEventListener("mouseup", handleMouseUp);

        return () => {
            window.removeEventListener("mousedown", handleMouseDown);
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleMouseUp);
        };
    }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);

    return (
        <>
            {activeZoneWidgets.map(({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
                const handleRightClick = (event: React.MouseEvent, id: string) => {
                    event.preventDefault();
                    const canvasElement = document.getElementById("real-time-vis-canvas");
                    if (!canvasElement) throw new Error("Canvas element not found");
                    const canvasRect = canvasElement.getBoundingClientRect();
                    const relativeX = event.clientX - canvasRect.left;
                    const relativeY = event.clientY - canvasRect.top;
                    setEditWidgetOptions(true);
                    setRightClickSelected(id);
                    setTop(relativeY);
                    setLeft(relativeX);
                };

                switch (type) {
                    case "ui-Widget 1":
                        return (<ProductionCapacity key={id} id={id} type={type} position={position} rotation={rotation} onContextMenu={(e) => handleRightClick(e, id)} />);
                    case "ui-Widget 2":
                        return (<ReturnOfInvestment key={id} id={id} type={type} position={position} rotation={rotation} onContextMenu={(e) => handleRightClick(e, id)} />);
                    case "ui-Widget 3":
                        return (<StateWorking key={id} id={id} type={type} position={position} rotation={rotation} onContextMenu={(e) => handleRightClick(e, id)} />);
                    case "ui-Widget 4":
                        return (<Throughput key={id} id={id} type={type} position={position} rotation={rotation} onContextMenu={(e) => handleRightClick(e, id)} />);
                    default:
                        return null;
                }
            })}
        </>
    );
}