import { useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import { Environment, KeyboardControls } from "@react-three/drei";

import World from "./world/world";
import Controls from "./controls/controls";
import TransformControl from "./controls/transformControls";
import PostProcessing from "./postProcessing/postProcessing"
import Sun from "./environment/sky";
import CamModelsGroup from "../collaboration/collabCams";
import Shadows from "./environment/shadow";
import MqttEvents from "../../services/factoryBuilder/mqtt/mqttEvents";

import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
import SelectionControls from "./controls/selection/selectionControls";
import MeasurementTool from "./tools/measurementTool";
import Simulation from "../simulation/simulation";
// import Simulation from "./simulationtemp/simulation";

export default function Scene() {

  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"] },
    // { name: "jump", keys: ["Space"] },
  ], [])

  return (
    <KeyboardControls map={map}>
      <Canvas
        // style={{ width: "100vw", height: "100vh" }}
        eventPrefix="client"
        gl={{ powerPreference: "high-performance", antialias: true }}
        onContextMenu={(e) => {
          e.preventDefault();
        }}
      >
        <Controls />
        <TransformControl />
        <SelectionControls />
        <MeasurementTool />
        <World />
        {/* <Simulation /> */}
        <Simulation />
        <PostProcessing />
        <Sun />
        <Shadows />
        <CamModelsGroup />
        <MqttEvents />
        <Environment files={background} environmentIntensity={1.5} />
      </Canvas>
    </KeyboardControls>
  );
}
