import * as THREE from "three";
import React, { Suspense, useRef } from "react";
import ReactDOM from "react-dom";
import { Canvas, useFrame, useLoader } from "react-three-fiber";
import { OrbitControls, Stats } from "@react-three/drei";
import "./styles.css";

const Sphere = () => {
  const sphereRef = useRef();
  const repeatX = 3;
  const repeatY = 2;

  const [base, bump, normal, ao, metal, rough] = useLoader(
    THREE.TextureLoader,
    [
      "/metal/metal1_basecolor.jpg",
      "/metal/metal1_height.png",
      "/metal/metal1_normal.jpg",
      "/metal/metal1_ambientOcclusion.jpg",
      "/metal/metal1_metallic.jpg",
      "/metal/metal1_roughness.jpg"
    ]
  );

  [base, bump, normal, ao, metal, rough].forEach((texture) => {
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(repeatX, repeatY);
  });

  useFrame(() => {
    sphereRef.current.rotation.x += 0.01;
    sphereRef.current.rotation.y += 0.01;
  });

  return (
    <mesh ref={sphereRef}>
      <sphereGeometry args={[3, 36, 36]} />
      <meshPhysicalMaterial
        map={base}
        bumpMap={bump}
        aoMap={ao}
        normalMap={normal}
        metalnessMap={metal}
        roughnessMap={rough}
      />
    </mesh>
  );
};

const App = () => {
  return (
    <Canvas style=>
      <pointLight position={[5, 10, -10]} intensity={1} />
      <pointLight position={[-3, 0, 10]} intensity={1} />
      <Suspense fallback={null}>
        <Sphere />
      </Suspense>
      <OrbitControls />
      <Stats />
    </Canvas>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));