import { Suspense, useRef } from 'react';
import type React from 'react';
import { OrbitControls } from '@react-three/drei';
import { observer } from 'mobx-react-lite';
import { state } from '../state';
import { SceneView } from './SceneView';
import { MOUSE, type OrthographicCamera, type PerspectiveCamera } from 'three';
import { useSyncCamera } from '../utils/hooks/useSyncCamera';
import { Physics } from '@react-three/rapier';


export const SceneEditorView = observer(function () {
    const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);

    useSyncCamera(() => state.view.camera.camera);

    const handleEnd = () => {
        const controls = controlsRef.current;
        if (!controls)
            return;

        const [x, y, z] = controls.object.rotation.toArray();
        state.view.camera.camera = {
            position: controls.object.position.toArray(),
            look: [x, y, z],
        };
    };

    return (<>
        <Suspense>
            <OrbitControls
                ref={controlsRef}
                onEnd={handleEnd}
                makeDefault
                mouseButtons={{
                    LEFT: MOUSE.PAN,
                    MIDDLE: MOUSE.ROTATE,
                    RIGHT: MOUSE.ROTATE,
                }}
                rotateSpeed={0.2}
                enableDamping={false}
            />
            {/* <Grid
                sectionThickness={0.5}
                cellThickness={0}
                sectionColor="white"
                infiniteGrid
            /> */}
            <Physics colliders={false} paused={true}>
                <SceneView scene={state.worldEditor.scene} isEditor debugOverlay />
            </Physics>
        </Suspense>
    </>);
});