"use client";
import { observer } from "mobx-react-lite";
import Link from "next/link";
import { useEffect, useRef } from "react";
import { useMinigamesState } from "./hooks";

const Clip = ({ clip }: { clip: any }) => {
  const state = useMinigamesState();

  const audio = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    if (audio.current) {
      audio.current.play();
    }
  }, [clip]);

  return (
    <div>
      <audio ref={audio} controls src={clip.audio_url} />
      {/* <p>{clip.metadata?.tags}</p> */}
      <p className="py-3">Pick a tag that was used in the clip:</p>

      <div className="gap-2 mt-2 grid grid-cols-3 lg:grid-cols-5 max-w-[700px]">
        {state.currentModeList.map(({ name, emoji }, i) => (
          <button
            key={i}
            className="p-2 sm:text-sm lg:text-xl hover:bg-gray-600 rounded bg-gray-800"
            title={name}
            onClick={() => state.submitAnswer(name)}
          >
            {name}
          </button>
        ))}
      </div>
    </div>
  );
};

const MinigamesClient = observer(() => {
  const state = useMinigamesState();

  useEffect(() => {
    state.load();
  }, []);

  return (
    <div className="flex-col align-middle space-y-4 p-8">
      Minigames
      <div className="flex space-x-3">
        <button
          className={state.mode === "instrument" ? "bg-blue-500" : ""}
          onClick={() => state.setMode("instrument")}
        >
          Instrument
        </button>
        <button
          className={state.mode === "genre" ? "bg-blue-500" : ""}
          onClick={() => state.setMode("genre")}
        >
          Genre
        </button>
      </div>
      <p>
        Score: {state.score} / {state.queuePosition}
      </p>
      {state.queue?.[state.queuePosition] ? (
        <Clip clip={state.queue[state.queuePosition]} />
      ) : null}
      {state.lastResult ? (
        <div
          className={
            state.lastResult.correct ? "bg-green-700 p-4" : "bg-red-700 p-4"
          }
        >
          Last Clip: {state.lastResult.answer} - {state.lastResult.tags}
          <Link href={`https://suno.com/song/${state.lastResult.clip.id}`}>
            View Clip
          </Link>
        </div>
      ) : null}
    </div>
  );
});

export default MinigamesClient;