import React from "https://cdn.skypack.dev/react@17.0.0";
import {
  Canvas,
  useFrame,
  useLoader
} from "https://cdn.skypack.dev/@react-three/fiber@7.0.0";
import * as THREE from "https://cdn.skypack.dev/three@v0.138.0";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.0";

gsap.registerPlugin(Observer)

const ROOT_NODE = document.querySelector("#app");

const TEXTURE_URL =
  "https://assets.codepen.io/605876/world-map-texture.png?format=auto&quality=48";
const BUMP_URL =
  "https://assets.codepen.io/605876/world-map-texture-bump.png?format=auto&quality=48";

const FRAME_COLOR = "hsl(40, 50%, 30%)";
const WORLD_COLOR = "hsl(0, 0%, 75%)";
const PLANE_COLOR = "hsl(0, 0%, 5%)";
const SHINE = 155;

const Globe = () => {
  const world = new THREE.TextureLoader().load(TEXTURE_URL);
  const bump = new THREE.TextureLoader().load(BUMP_URL);
  const globeRef = React.useRef(null);

  React.useEffect(() => {
    
    const spinTo = dest => gsap.to(globeRef.current.rotation, { y: `+=${Math.PI / 180 * dest}`})
    
    if (globeRef.current) {
      Observer.create({
        type: "wheel,touch,scroll,pointer",
        preventDefault: true,
        onUp: ({ deltaY, velocityY }) => {
          const SPIN = gsap.utils.mapRange(-10000, 0, -1080, 0, velocityY)
          spinTo(SPIN)
        },
        onDown: ({ deltaY, velocityY }) => {
          const SPIN = gsap.utils.mapRange(0, 10000, 0, 1080, velocityY)
          spinTo(SPIN)
        },
        tolerance: 10
      });
    }
    // Set up the scroll listener in here for spinning the globe        
  }, [])
 
  return (
    <mesh ref={globeRef} castShadow={true} >
      <sphereGeometry args={[1, 32, 16]} />
      <meshPhongMaterial
        map={world}
        bumpMap={bump}
        bumpScale={0.5}
        color={WORLD_COLOR}
        shininess={SHINE}
      />
    </mesh>
  );
};

const WorldGlobe = () => {
  const globeRef = React.useRef(null);
  React.useEffect(() => {
    if (globeRef.current) {
      gsap.to(globeRef.current.rotation, {
        y: Math.PI / 180 * 360,
        ease: 'none',
        repeat: -1,
        duration: 20,
      })      
    }
  }, [])
  return (
    <group ref={globeRef}>
      {/* Globe w/ Axis */}
      <group rotation={[0, Math.PI / 180 * 40, (Math.PI / 180) * 16]}>
        <mesh position={[0, 0, 0]} rotation={[0, 0, Math.PI / 180 * 80]} castShadow={true}>
          <torusGeometry
            args={[
              1.1,
              0.05,
              32,
              32,
              Math.PI / 180 * 200,
            ]}
          />
          <meshPhongMaterial shininess={SHINE} color={FRAME_COLOR} />
        </mesh>
        <mesh position={[0, 0, 0]} castShadow={true}>
          <cylinderGeometry args={[0.025, 0.025, 2.4, 30]} />
          <meshPhongMaterial shininess={SHINE} color={FRAME_COLOR} />
        </mesh>
        <Globe />
      </group>
      {/* The Stand it comes on */}
      <group position={[0, -1.6, 0]}>
        <mesh position={[0, 0.25, 0]} castShadow={true}>
          <cylinderGeometry args={[0.1, 0.1, 0.5, 30]} />
          <meshPhongMaterial shininess={SHINE} color={FRAME_COLOR} />
        </mesh>
        <mesh castShadow={true}>
          <cylinderGeometry args={[0.8, 0.8, 0.16, 30]}/>
          <meshPhongMaterial shininess={SHINE} color={FRAME_COLOR} />
        </mesh>
      </group>
    </group>
  );
};

const App = () => {
  return (
    <div className="container">
      <Canvas resize={{ debounce: { scroll: 50, resize: 10 } }} shadows={true}>
        <pointLight castShadow={true} args={[0xffffff, 1, 0, 2]} position={[20, 20, 15]} />
        <pointLight args={[0xffffff, 1, 0, 2]} position={[-50, 30, -10]} />
        <WorldGlobe />
        <mesh rotation={[Math.PI / 180 * -90, 0, 0]} position={[0, -2, 0]} receiveShadow={true}>
          <circleGeometry args={[20, 20]}/>
          <shadowMaterial />
        </mesh>
      </Canvas>
    </div>
  );
};

ReactDOM.render(<App />, ROOT_NODE);