import { useEffect, useRef } from "react";

import Three from "@/assets/three";
import useQueryData from "@/hooks/useQueryData";
import { useStore } from "@/store";

import styles from "./styles.module.scss";

const Canvas = () => {
  const setThree = useStore.use.setThree();
  const step = useStore.use.step();
  const lastStep = useStore.use.lastStep();
  const setLastStep = useStore.use.setLastStep();
  const songs = useStore.use.songs();
  const song = useStore.use.song();
  const isReady = useStore.use.isReady();

  const el = useRef<HTMLCanvasElement>(null);
  const threeInstance = useStore.use.three();
  const { isQueryDataReady } = useQueryData();
  const initialized = useRef<boolean>(false);

  const isMuted = useStore.use.isMuted();
  const carouselDirection = useStore.use.carouselDirection();

  useEffect(() => {
    threeInstance?.setStep(step, lastStep);
    setLastStep(step);
  }, [step, lastStep, setLastStep, threeInstance]);

  useEffect(() => {
    threeInstance?.setIsMuted(isMuted);
  }, [threeInstance, isMuted]);

  useEffect(() => {
    threeInstance?.setSong(song, carouselDirection);
  }, [threeInstance, song]);

  useEffect(() => {
    threeInstance?.setSongs(songs);
  }, [threeInstance, songs]);

  useEffect(() => {
    if (initialized.current || !isQueryDataReady || !isReady) return;
    threeInstance?.init3DScene(step, songs, isMuted);
    initialized.current = true;
  }, [threeInstance, step, songs, isQueryDataReady, isReady, isMuted]);

  useEffect(() => {
    const three = new Three(el.current as HTMLCanvasElement);
    setThree(three);
    return () => {
      three.destroy();
    };
  }, [setThree]);

  return <canvas ref={el} className={styles.canvas} />;
};

export default Canvas;