// App.tsx

import * as THREE from "three";
import React, { useRef, useState } from "react";
import "./App.css";

import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { useSpring, a } from "@react-spring/three";

interface SpinningMeshProps {
  position: THREE.Vector3 | [x: number, y: number, z: number];
  args: [
    width?: number | undefined,
    height?: number | undefined,
    depth?: number | undefined,
    widthSegments?: number | undefined,
    heightSegments?: number | undefined,
    depthSegments?: number | undefined
  ];
  color: string;
  speed: number;
}

const SpinningMesh: React.FC<SpinningMeshProps> = ({
  position,
  args,
  color,
}) => {
  const mesh = useRef<THREE.Mesh>(null!);
  useFrame(() => (mesh.current!.rotation.x = mesh.current!.rotation.y += 0.01));

  const [expand, setExpand] = useState<boolean>(false);

  const props: any = useSpring({
    scale: expand ? [1.4, 1.4, 1.4] : [1, 1, 1],
  });

  return (
    <a.mesh
      onClick={() => setExpand(!expand)}
      scale={props.scale}
      castShadow
      position={position}
      ref={mesh}
    >
      <boxBufferGeometry attach="geometry" args={args} />
      <meshBasicMaterial attach="material" color={expand ? "rose" : color} />
    </a.mesh>
  );
};

/**
 * Canvas
 */

function App() {
  return (
    <>
      <h1 className="text-7xl font-bold text-center my-auto translate-y-[50vh] z-10 relative pointer-events-none">
        React-Three Stable.
      </h1>
      <Canvas camera={{ position: [-5, 2, 10], fov: 60 }}>
        <SpinningMesh
          position={[0, 1, 0]}
          args={[3, 2, 1]}
          color="lightblue"
          speed={2}
        />
        <OrbitControls />
      </Canvas>
    </>
  );
}

export default App;