import { useCallback, useState } from "react";

import { QUIZ_STEPS, QUIZ_STEPS_VARIANTS } from "@/config/data";
import { useStore } from "@/store";
import { type QuizSectionItem, type SunoSong } from "@/types";

import useLayoutEffect from "./useIsomorphicLayoutEffect";

export default function useQueryData() {
  const [isQueryDataReady, setIsQueryDataReady] = useState(false);
  const setSongs = useStore.use.setSongs();
  const setSong = useStore.use.setSong();
  const setStep = useStore.use.setStep();
  const setNameTo = useStore.use.setNameTo();
  const setNameFrom = useStore.use.setNameFrom();
  const nameTo = useStore.use.nameTo();
  const nameFrom = useStore.use.nameFrom();

  useLayoutEffect(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const songID = urlParams.get("s");
      const base64Params = urlParams.get("r");

      if (!songID || !base64Params) return;
      const urlDecodeBase64 = window.atob(base64Params);
      const urlSplitted = urlDecodeBase64.split("&");

      /*
      i stands for id of the song
      t stands for name to
      f stands for name from
      */
      const queryData = {
        i: decodeURIComponent(songID),
        t: decodeURIComponent(urlSplitted[0]),
        f: decodeURIComponent(urlSplitted[1]),
      };

      fetch(`/api/clips/?ids=${queryData.i}`, {
        method: "GET",
      })
        .then((response) => response.json())
        .then((data) => {
          if (!data.length) {
            return;
          }
          setSongs(data);
          setSong(data[0]);
          setNameTo(queryData.t);
          // console.log("song data", data[0].image_url, data[0].audio_url);
          setNameFrom(queryData.f);
          const index = QUIZ_STEPS.findIndex(
            (step: QuizSectionItem) => step.id === "results",
          );
          // console.log("INDEX", index);
          setStep(index);
        });
    } catch (e) {
      console.log(e);
    } finally {
      setIsQueryDataReady(true);
    }
  }, [setStep, setSongs, setSong, setIsQueryDataReady, setNameFrom, setNameTo]);

  const createBase64Song = useCallback(
    (song: SunoSong) => {
      const formattedSongs =
        encodeURIComponent(song.id) +
        "&r=" +
        window.btoa(
          `${encodeURIComponent(nameTo)}&${encodeURIComponent(nameFrom)}`,
        );

      const newurl = `${window.origin}?s=${formattedSongs}`;
      window.history.pushState({ path: newurl }, "", newurl);
    },
    [nameTo, nameFrom],
  );

  return { isQueryDataReady, createBase64Song };
}