Dwinzo_Demo/app/src/modules/builder/wallAsset/wallAssetCreator.tsx

import { useThree } from '@react-three/fiber';
import { useEffect } from 'react'
import useModuleStore from '../../../store/useModuleStore';
import { useSelectedItem, useSocketStore, useToggleView } from '../../../store/builder/store';
import { MathUtils, Vector3 } from 'three';
import { useSceneContext } from '../../scene/sceneContext';
import { useParams } from 'react-router-dom';
import { useVersionContext } from '../version/versionContext';
import { getUserData } from '../../../functions/getUserData';
import closestPointOnLineSegment from '../line/helpers/getClosestPointOnLineSegment';

// import { upsertWallAssetApi } from '../../../services/factoryBuilder/asset/wallAsset/upsertWallAssetApi';

function WallAssetCreator() {
    const { socket } = useSocketStore();
    const { pointer, camera, raycaster, scene, gl } = useThree();
    const { toggleView } = useToggleView();
    const { activeModule } = useModuleStore();
    const { wallAssetStore } = useSceneContext();
    const { addWallAsset } = wallAssetStore();
    const { selectedItem, setSelectedItem } = useSelectedItem();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion } = selectedVersionStore();
    const { userId, organization } = getUserData();
    const { projectId } = useParams();

    useEffect(() => {
        const canvasElement = gl.domElement;

        const onDrop = (event: DragEvent) => {
            if (!event.dataTransfer?.files[0]) return;
            if (selectedItem.id !== "" && event.dataTransfer?.files[0] && selectedItem.category === 'Fenestration') {
                pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
                pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

                raycaster.setFromCamera(pointer, camera);
                const intersects = raycaster.intersectObjects(scene.children, true);
                const intersect = intersects.find((intersect) => intersect.object.name.includes('WallReference'));

                if (intersect) {
                    const wall = intersect.object.userData as Wall;
                    const closestPoint = closestPointOnLineSegment(
                        new Vector3(intersect.point.x, 0, intersect.point.z),
                        new Vector3(...wall.points[0].position),
                        new Vector3(...wall.points[1].position)
                    )

                    const wallRotation = intersect.object.rotation.clone();

                    const newWallAsset: WallAsset = {
                        modelName: selectedItem.name,
                        modelUuid: MathUtils.generateUUID(),
                        wallUuid: wall.wallUuid,
                        wallAssetType: selectedItem.subType,
                        assetId: selectedItem.id,
                        position: [closestPoint.x, selectedItem.subType === "fixedMove" ? 0 : intersect.point.y, closestPoint.z],
                        rotation: [wallRotation.x, wallRotation.y, wallRotation.z],
                        isLocked: false,
                        isVisible: true,
                        opacity: 1,
                    };

                    addWallAsset(newWallAsset);
                    if (projectId) {

                        // API

                        // upsertWallAssetApi(projectId, selectedVersion?.versionId || '', newWallAsset);

                        // SOCKET

                        const data = {
                            wallAssetData: newWallAsset,
                            projectId: projectId,
                            versionId: selectedVersion?.versionId || '',
                            userId: userId,
                            organization: organization
                        }

                        socket.emit('v1:wall-asset:add', data);

                    }
                }
            }
        };

        if (!toggleView && activeModule === 'builder') {
            canvasElement.addEventListener('drop', onDrop);
        }

        return () => {
            canvasElement.removeEventListener('drop', onDrop);
        };

    }, [gl, camera, toggleView, activeModule, socket, selectedItem, setSelectedItem]);

    return (
        <>
        </>
    )
}

export default WallAssetCreator