import { useMemo } from "react";
import * as THREE from "three";
import { observer } from "mobx-react-lite";
import type { ObjectGeometryViewItem } from "../../../state/viewLayers";

export const SelectionBoundingBox = observer(function({ item }: { item: ObjectGeometryViewItem }) {
    const obj = item.object;
    const bb = item.objectTypeGeometry.boundingBox;

    const geometry = useMemo(() => {
        if (!bb)
            return undefined;

        const box = new THREE.BoxGeometry(
            bb.max[0] - bb.min[0],
            bb.max[1] - bb.min[1],
            bb.max[2] - bb.min[2],
        );
        return new THREE.EdgesGeometry(box);
    }, [bb]);

    const center = useMemo(() => {
        if (!bb)
            return [0.5, 0.5, 0.5] as const;

        return [
            (bb.min[0] + bb.max[0]) / 2,
            (bb.min[1] + bb.max[1]) / 2,
            (bb.min[2] + bb.max[2]) / 2,
        ] as const;
    }, [bb]);

    if (!geometry)
        return null;

    return <mesh
        position={obj.position}
        rotation={obj.rotation}
        scale={obj.scale}
    >
        <lineSegments position={center} geometry={geometry}>
            <lineBasicMaterial color="#ffff00" />
        </lineSegments>
    </mesh>;
});