"use client";

import Image from "next/image";
import ReactAudioPlayer from "react-audio-player";
import {useEffect, useState} from "react";
import { getCookie, setCookie } from "cookies-next";

export default function RecordBox() {
  let player: ReactAudioPlayer | null = null;
  let notes: HTMLImageElement | null = null;

  const [firstSong, setFirstSong] = useState<string | undefined>();
  const [shouldAutoPlay, setShouldAutoPlay] = useState<boolean>(true);

  useEffect(() => {
    setFirstSong(randomSong());
    // Get autoplay preference from cookie
    const autoplayCookie = getCookie('jukebox-autoplay');
    setShouldAutoPlay(autoplayCookie === 'true' || autoplayCookie === undefined);
  }, []);

  return <div>
    <Image
      className="hidden bottom-23 right-0 fixed z-50 pb-2 pr-2"
      alt={"It's Playing"} width={100} height={100} src={"/musical_notes_final.gif"}
      unoptimized={true}
      ref={(ref) => { notes = ref; }}
    />
    <button>
      <Image className="bottom-0 right-0 fixed z-50 pb-2 pr-2 cursor-pointer"
             src={"/record_player.svg"} width={100} height={100} alt={"Player"}
             onClick={() => {
               if (player != null && notes != null) {
                 if (player.audioEl.current.paused) {
                   player.audioEl.current.play().then();
                   notes.className = "bottom-23 right-0 fixed z-50 pb-2 pr-2";
                   // Save preference for autoplay ON
                   setCookie('jukebox-autoplay', 'true');
                   setShouldAutoPlay(true);
                 } else {
                   player.audioEl.current.pause();
                   notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
                   // Save preference for autoplay OFF
                   setCookie('jukebox-autoplay', 'false');
                   setShouldAutoPlay(false);
                 }
               }
             }}
      />
    </button>
    <ReactAudioPlayer
      autoPlay={shouldAutoPlay} controls={false} className=""
      volume={0.2}
      ref={(element) => { player = element; }}
      src={firstSong}
      onPlay={() => {started(player, notes)}}
      onEnded={() => {ended(player, notes, shouldAutoPlay)}}
      onPause={() => {stopped(player, notes)}}
    />
  </div>
}

function started(player: ReactAudioPlayer | null, notes: HTMLImageElement | null) {
  if (player != null && notes != null) {
    notes.className = "bottom-23 right-0 fixed z-50 pb-2 pr-2";
  }
}

function stopped(player: ReactAudioPlayer | null, notes: HTMLImageElement | null) {
  if (player != null && notes != null) {
    notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
  }
}

function ended(player: ReactAudioPlayer | null, notes: HTMLImageElement | null, autoPlay: boolean = true) {
  if (player != null && notes != null) {
    notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
    player.audioEl.current.src = randomSong();
    if (autoPlay) {
      player.audioEl.current.play().then();
    }
  }
}

function randomSong(): string {
  const rand = Math.floor(Math.random() * 9);
  let path = "/songs/";

  if (rand == 0) {
    path += "blood"
  }
  if (rand == 1) {
    path += "dna"
  }
  if (rand == 2) {
    path += "duckworth"
  }
  if (rand == 3) {
    path += "fear"
  }
  if (rand == 4) {
    path += "feel"
  }
  if (rand == 5) {
    path += "god"
  }
  if (rand == 6) {
    path += "humble"
  }
  if (rand == 7) {
    path += "xxx"
  }
  if (rand == 8) {
    path += "yah"
  }

  path += "_instrumental.mp3";

  return path;
}