import { Html } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useRef } from "react";
import * as THREE from "three";
import type { RuntimeObjectInstance } from "../types";
import { debugLabelsStore } from "../state/debugLabelsStore";
import { state } from "../state";
import { observer } from "mobx-react-lite";
import { formatV3 } from "../utils";

export const DebugLabel = observer(function ({ obj }: { obj: RuntimeObjectInstance; }) {
    const groupRef = useRef<THREE.Group>(null);

    const rb = obj.rb();
    const texts = [
        `${state.world.getObjectTypeById(obj.typeId)?.name} ${obj.id}`,
        `position: ${formatV3(obj.position)}`,
        `rotation: ${formatV3(obj.rotation)}`,
        ...Object.entries(debugLabelsStore.getAll(obj.id))
            .map(([k, v]) => `${k}: ${v}`),
    ];

    if (rb) {
        try {
            const t = rb.translation();
            texts.push(...[
                `rb position: ${[t.x, t.y, t.z]}`,
            ]);
        } catch {
            texts.push('rb: stale handle');
        }
    }

    useFrame(() => {
        if (!groupRef.current)
            return;

        const [px, py, pz] = obj.position;
        // const bb = obj.cache.boundingBox;
        // const halfHeight = bb ? (bb.max[1] - bb.min[1]) / 2 : 1;
        // groupRef.current.position.set(px, py + halfHeight + 0.5, pz);
        groupRef.current.position.set(px, py, pz);
    });

    const text = texts.join('\n');
    if (!text)
        return null;

    return (
        <group ref={groupRef}>
            <Html center sprite>
                <div style={{
                    background: 'rgba(0,0,0,0.65)',
                    color: '#fff',
                    padding: 10,
                    borderRadius: 10,
                    fontSize: 10,
                    fontFamily: 'monospace',
                    whiteSpace: 'pre',
                    pointerEvents: 'none',
                    userSelect: 'none',
                    opacity: 0.3,
                }}>
                    {text}
                </div>
            </Html>
        </group>
    );
});