import { useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import { Color } from "three";
import { KeyboardControls } from "@react-three/drei";
import { SceneProvider } from "./sceneContext";

import Builder from "../builder/builder";
import Visualization from "../visualization/visualization";
import Setup from "./setup/setup";
import Simulation from "../simulation/simulation";
import Collaboration from "../collaboration/collaboration";

export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
    const map = useMemo(() => [
        { name: "forward", keys: ["ArrowUp", "w", "W"] },
        { name: "backward", keys: ["ArrowDown", "s", "S"] },
        { name: "left", keys: ["ArrowLeft", "a", "A"] },
        { name: "right", keys: ["ArrowRight", "d", "D"] },
    ], []);

    return (
        <SceneProvider layout={layout}>
            <KeyboardControls map={map}>
                <Canvas
                    eventPrefix="client"
                    gl={{ powerPreference: "high-performance", antialias: true }}
                    onContextMenu={(e) => {
                        e.preventDefault();
                    }}
                    onCreated={(e) => {
                        e.scene.background = new Color(0x19191d);
                    }}
                >
                    <Setup />
                    <Collaboration />
                    <Builder />
                    <Simulation />
                    <Visualization />
                </Canvas>
            </KeyboardControls>
        </SceneProvider>
    );
}