"use client"
import { Canvas } from '@react-three/fiber'
import { Line, OrbitControls, useFBX } from '@react-three/drei'
import { Leva, useControls } from 'leva'
import { StrictMode, useRef } from 'react'

export default function App() {
  return (
    <StrictMode>
      <Leva flat />
      <Canvas camera={{ fov: 100, near: 0.1, far: 1000, position: [- 200, 200, 200] }}>
        <Experience />
      </Canvas>
    </StrictMode>
  )
}

export function Experience() {

  const { position } = useControls({ position: [5, 188, -18] })
  const objRef = useRef()
  let fbx = useFBX('/models/revit/revit-export.fbx')

  return (
    <Canvas>
      <OrbitControls makeDefault />
      <directionalLight position={[1, 2, 3]} intensity={1.5} />
      <ambientLight intensity={0.5} />

      <Line points={[[0, 0, 0], [1000, 0, 0]]} color="red" />
      <Line points={[[0, 0, 0], [0, 1000, 0]]} color="green" />
      <Line points={[[0, 0, 0], [0, 0, 1000]]} color="blue" />

      <group position={position} rotation={[-Math.PI / 2, 0, 0]}>
        <primitive object={fbx} ref={objRef} ></primitive>
      </group>
    </Canvas>
  )
}