import React, { Suspense } from 'react'
import { Physics } from '@react-three/cannon'
import { PointerLockControls } from '@react-three/drei'

import World from './models/World'
import WorldCollisions from './models/WorldCollisions'
import Player from './Player'
import Lighting from './Lighting'
import Effects from './Effects'

const Scene: React.FC = () => {
  return (
    <>
      <Lighting />

      <Suspense fallback={null}>
        <World />
        <Physics
          gravity={[0, 0, 0]}
          iterations={2}
          size={10}
          defaultContactMaterial={{
            friction: 0,
            restitution: 0,
          }}
        >
          <WorldCollisions />
          <Player />
        </Physics>
        <Effects />
      </Suspense>

      <PointerLockControls />
    </>
  )
}

export default Scene