import { Line } from "@react-three/drei";
import { useMemo } from "react";
import * as THREE from "three";
import { useSelectedAssets } from "../../../../store/builder/store";

const BoundingBox = ({ boundingBoxRef }: any) => {
    const { selectedAssets } = useSelectedAssets();

    const { points, boxProps } = useMemo(() => {
        if (selectedAssets.length === 0) return { points: [], boxProps: {} };

        const box = new THREE.Box3();
        selectedAssets.forEach((obj: any) => box.expandByObject(obj.clone()));

        const size = new THREE.Vector3();
        box.getSize(size);
        const center = new THREE.Vector3();
        box.getCenter(center);

        const halfSize = size.clone().multiplyScalar(0.5);
        const min = center.clone().sub(halfSize);
        const max = center.clone().add(halfSize);

        const points: any = [
            [min.x, min.y, min.z], [max.x, min.y, min.z],
            [max.x, min.y, min.z], [max.x, max.y, min.z],
            [max.x, max.y, min.z], [min.x, max.y, min.z],
            [min.x, max.y, min.z], [min.x, min.y, min.z],

            [min.x, min.y, max.z], [max.x, min.y, max.z],
            [max.x, min.y, max.z], [max.x, max.y, max.z],
            [max.x, max.y, max.z], [min.x, max.y, max.z],
            [min.x, max.y, max.z], [min.x, min.y, max.z],

            [min.x, min.y, min.z], [min.x, min.y, max.z],
            [max.x, min.y, min.z], [max.x, min.y, max.z],
            [max.x, max.y, min.z], [max.x, max.y, max.z],
            [min.x, max.y, min.z], [min.x, max.y, max.z],
        ];

        return {
            points,
            boxProps: { position: center.toArray(), args: size.toArray() }
        };
    }, [selectedAssets]);

    const savedTheme: string | null = localStorage.getItem("theme") || "light";
    
    return (
        <>
            {points.length > 0 && (
                <>
                    <Line points={points} color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"} lineWidth={2.7} segments />
                    <mesh ref={boundingBoxRef} visible={false} position={boxProps.position}>
                        <boxGeometry args={boxProps.args} />
                        <meshBasicMaterial />
                    </mesh>
                </>
            )}
        </>
    );
};

export default BoundingBox;