import * as yaml from 'yaml';
import { observer } from "mobx-react-lite";
import { state } from "../state/root";

export const HitTestView = observer(function () {

    const left = state.mousePosition.x;
    const top = state.mousePosition.y;

    return (
        <div id="hit-test" style={{ top, left }}>
            <pre style={{ textWrap: 'wrap' }}>
                {
                    `${top},${left}`
                }
                {
                    state.hitResults.hits.map((hit) =>
                        <div key={hit.object.uuid}>
                            <div>{yaml.stringify(
                                {
                                    hit: { ...hit, object: undefined, triangle: undefined },
                                    userData: hit.object.userData,
                                },
                                undefined,
                                2,
                            )}</div>
                        </div>
                    )
                }
            </pre>
        </div>
    )
});