import React, { Suspense } from 'react'
import { useThree } from 'react-three-fiber'
import { Stats, Text } from '@react-three/drei'

import World from './World'
import Player from './Player'
import Lighting from './Lighting'
import Effects from './Effects'
import Controls from './Controls'
import Users from './Users'
import { useEffect } from 'react'

const Scene: React.FC = () => {
  // addAfterEffect(() => {
  //   console.log(gl.info.render);
  // });

  const { scene } = useThree()
  useEffect(() => {
    //if (scene) scene.overrideMaterial = new MeshBasicMaterial({ color: 'green' })
  }, [scene])

  return (
    <>
      {process.env.NODE_ENV !== 'production' ? <Stats /> : null}
      <Lighting />

      <Suspense fallback={null}>
        <World />
        <Player />

        <Text
          position={[-5.640829086303711, 13.5, -74.88675842285156]}
          color="white"
          fontSize={1.5}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          ARTIFICIOS 2020
        </Text>

        <Users />
        <Effects />
      </Suspense>

      <Controls />
    </>
  )
}

export default Scene