import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { useSubModuleStore } from "../../../../store/useModuleStore";
import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";

function TriggerConnector() {
    const { gl, raycaster, scene } = useThree();
    const { subModule } = useSubModuleStore();
    const { getPointByUuid, getIsEventInProduct } = useProductStore();
    const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
    const { selectedProduct } = useSelectedProduct();

    useEffect(() => {

        const canvasElement = gl.domElement;

        let drag = false;
        let isRightMouseDown = false;

        const onMouseDown = (evt: MouseEvent) => {
            if (selectedAsset) {
                clearSelectedAsset();
            }
            if (evt.button === 2) {
                isRightMouseDown = true;
                drag = false;
            }
        };

        const onMouseUp = (evt: MouseEvent) => {
            if (evt.button === 2) {
                isRightMouseDown = false;
            }
        }

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

        const handleRightClick = (evt: MouseEvent) => {
            if (drag) return;
            evt.preventDefault();
            const canvasElement = gl.domElement;
            if (!canvasElement) return;

            let intersects = raycaster.intersectObjects(scene.children, true);
            if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
                let currentObject = intersects[0].object;

                if (currentObject && currentObject.name === 'Event-Sphere') {

                    const isInProduct = getIsEventInProduct(
                        selectedProduct.productId,
                        currentObject.userData.modelUuid
                    );

                    // You left Here

                    if (isInProduct) {

                        const event = getPointByUuid(
                            selectedProduct.productId,
                            currentObject.userData.modelUuid,
                            currentObject.userData.pointUuid
                        );
                        console.log('event: ', event);
                    } else {

                    }
                }

            } else {

            }
        };

        if (subModule === 'simulations') {
            canvasElement.addEventListener("mousedown", onMouseDown);
            canvasElement.addEventListener("mouseup", onMouseUp);
            canvasElement.addEventListener("mousemove", onMouseMove);
            canvasElement.addEventListener('contextmenu', handleRightClick);
        }

        return () => {
            canvasElement.removeEventListener("mousedown", onMouseDown);
            canvasElement.removeEventListener("mouseup", onMouseUp);
            canvasElement.removeEventListener("mousemove", onMouseMove);
            canvasElement.removeEventListener('contextmenu', handleRightClick);
        };

    }, [gl, subModule]);

    return (
        <>
        </>
    )
}

export default TriggerConnector