import { useEffect } from "react";
import { observer } from "mobx-react-lite";
import { debugLabelsStore } from "../state/debugLabelsState";
import { DebugLabel } from "./DebugLabel";
import type { Scene } from "../types";

export const DebugLabelsView = observer(function ({ scene, editMode }: { scene: Scene, editMode?: boolean }) {
    useEffect(
        () => {
            return () => { debugLabelsStore.clear(); };
        },
        [],
    );

    return <>
        {
            Object.entries(scene.objects)
                .filter(([_, obj]) => editMode || obj.visible)
                .map(([objectId, obj]) => {
                    return <DebugLabel key={objectId} obj={obj} />;
                })
        }
    </>;
});