import React, { useState, useRef } from "react";
import { OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import { Canvas, extend, useThree, useFrame} from "react-three-fiber";
import { useSpring, a } from "react-spring/three";
import "./App.css";

extend({ OrbitControls })

const Controls = () =>{
  const orbitRef = useRef();
  const { camera, gl} = useThree();

  useFrame(()=>{
    orbitRef.current.update()
  })

  return(
    <orbitControls autoRotate
      args={ [camera, gl.domElement]}
      ref={ orbitRef}
    />
  )
}

// const plane = ()=>{
//   <mesh></mesh>
// }

const Box = () => {
  // const meshRef = useRef();
  const [hovered, setHovered] = useState(false);
  const [active, setActive] = useState(false);
  const props = useSpring({
    scale: active ? [1.5, 1.5, 1.5] : [1.2, 1.2, 1.2],
    color: hovered ? "green" : "teal"
  });


//   useFrame(()=>{
//   meshRef.current.rotation.y += 0.01
// })

  console.log("hello");

  return (
    <a.mesh
      // ref={meshRef}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
      onClick={() => setActive(!active)}
      scale={props.scale}
    >
      <ambientLight />
      <spotLight position={[150, 150, 150]}/>
      <boxBufferGeometry attach="geometry" args={[1.2, 1.2, 1.2]} />
      <a.meshPhysicalMaterial attach="material" color={props.color} />
    </a.mesh>
  );
};



export default () => (
  <Canvas>

    <Controls />
    <Box />
  </Canvas>
);