import "./canvas.sass";
import {motion} from "framer-motion";
import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
import {Moon} from "./Moon";
import {AnimateSpin} from "../animations";
import {BakeShadows, Environment, OrbitControls, Preload, useTexture} from "@react-three/drei";
import Jupiter from "../img/2k_jupiter.webp";
import Makemake from "../img/2k_makemake_fictional.webp";
import Ceres from "../img/2k_ceres_fictional.webp";
import Haumea from "../img/2k_haumea_fictional.webp";
import MilkyWay from "../img/2k_stars_milky_way.jpg";
import SaturnRings from "../img/12k_jupiter_rings.webp";
import {useRef} from "react";
import type {Mesh} from "three";
import * as THREE from "three";

export default function Canvas() {

  // fade animation sync with loading
  return (
    <motion.main className="canvas">
      <section className="canvas-ctr">
        <ThreeCanvas camera={{position: [3,3,3]}} shadows dpr={[1, 2]}>
          <OrbitControls enablePan={false} enableZoom={false} />
          <BakeShadows/>
          <Environment background files={MilkyWay}/>
          <Moons/>
          <Planet/>
          <Rings/>
          <ambientLight args={[1,1]} />
          <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
          <Preload all />
        </ThreeCanvas>
      </section>
      <motion.h1 className="welcome" animate={AnimateSpin().animate}>
        Welcome to my blog
      </motion.h1>
      <h3 className="tooltip">
        Drag to orbit
      </h3>
    </motion.main>
  )
}

function Moons() {
  const makemake = useTexture(Makemake);
  const haumea = useTexture(Haumea);
  const ceres = useTexture(Ceres);

  return <>
    <Moon radius={8} color="pink" map={makemake} step={0.01}/>
    <Moon radius={6} color="grey" map={haumea} step={0.02}/>
    <Moon radius={4} color="green" map={ceres} step={0.03}/>
  </>
}

function Rings() {
  const map = useTexture(SaturnRings);
  
  // To avoid seeing the backside as invisible, use DoubleSide.
  // We should also use a RingGeometry rather than a CircleGeometry so it is empty in the center.
  return <mesh position={[0,0,0]} rotation={[-Math.PI / 2, 0, 0]}>
    <ringGeometry args={[1.2, 1.7, 64]} />
    <meshPhysicalMaterial map={map}  transparent={true} side={THREE.DoubleSide} iridescence={1}/>
  </mesh>
}

function Planet() {
  const colorMap = useTexture(Jupiter);
  const planetRef = useRef<Mesh>(null);

  // add planet spin
  useFrame(() => {
    if(!planetRef.current) return;

    planetRef.current.rotation.y += 0.005;
  });

  return <mesh ref={planetRef} position={[0,0,0]}>
    <sphereGeometry args={[1, 32, 32]} />
    <meshPhysicalMaterial map={colorMap} color="orange" iridescence={1} />
  </mesh>
}