import { useRef, useState } from "react"
import { useFrame } from "@react-three/fiber"

export function Box({ color, ...props }) {
    const ref = useRef()
    const [c, setColor] = useState(color);
    const [click, setClick] = useState(false);
    const lastPosition = useRef(0);
    const time = useRef(0);

    useFrame((_,delta) => {
        ref.current.rotation.x += 1 * delta
        ref.current.rotation.y += 2.5 * delta
        
        if (!click){
            time.current += delta;
            ref.current.position.y = Math.sin(time.current);
        } else {
            lastPosition.current = time.current;
        }
    })
    const handleClick = () => {
        setClick(!click);
        if (click) {
            time.current = lastPosition.current
        }
    }
    return (
       <mesh {...props} ref={ref} 
       onPointerEnter={()=> setColor('blue')}
       onPointerOut={()=> setColor('pink')}
       onPointerDown={handleClick}
       >
        <boxGeometry />
        <meshStandardMaterial color={c}/>
      </mesh>
      
    )
}