"use client";
import { useState, useEffect } from "react";
import { Nunito } from "next/font/google";
import users from "muzak/data/users.json";
import Image from "next/image";
import Link from "next/link";
import { api, Track } from "muzak/data/fetcher";

const nunito = Nunito({
  weight: "900",
  subsets: ["latin"],
});

export default function Lobby() {
  const [partySize, setPartySize] = useState(8);
  const [userList, setUserList] = useState([]);
  const [yesVoteList, setYesVoteList] = useState([]);
  const [noVoteList, setNoVoteList] = useState([]);

  const [currentSong, setCurrentSong] = useState<Track>();
  const [songLoading, setSongLoading] = useState(false);

  useEffect(() => {
    populateUserList();
  }, [partySize]);

  async function getTrack() {
    setSongLoading(true);
    const { data: track } = await api.tracks.vote({});
    setCurrentSong(track);
    console.log("I got a track!", track.name);
    setSongLoading(false);
  }

  useEffect(() => {
    if (!currentSong && !songLoading) getTrack();
  }, []);

  function populateUserList() {
    const mappedUsers = users.slice(0, partySize).map((user) => ({
      id: user.id,
      name: user.name,
      avatar: user.avatar,
      host: user.host,
    }));
    setUserList(mappedUsers);
  }

  // function handleYesVote(user) {
  //   setYesVoteList([...yesVoteList, user]);
  // }

  // function handleNoVote(user) {
  //   setNoVoteList([...noVoteList, user]);
  // }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between gap-4 p-24">
      <div className="flex w-full items-start justify-between text-center">
        <div className="flex-1"></div>
        <div className="flex flex-1 items-center justify-center">
          <div className="flex h-[170px] w-[170px] items-center justify-center rounded-full border-2 bg-orange-400">
            <div className="text-5xl text-white drop-shadow-sm drop-shadow-black">
              <button onClick={getTrack}>30</button>
            </div>
          </div>
        </div>

        <div className="flex flex-1 flex-row items-center justify-end gap-4">
          <Link
            href="/pause"
            className="w-30 rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
          >
            PAUSE
          </Link>
          <Link
            href="/voting"
            className="w-30 rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
          >
            NEXT
          </Link>
        </div>
      </div>

      <div className="flex flex-col items-center justify-center">
        <div className="flex flex-row items-center justify-center gap-x-32">
          <div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
            {userList.map((user) => (
              <div
                key={user.id}
                className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
              >
                <img src={user.avatar} alt={user.name} width={75} height={75} />
                <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
                  {user.name}
                </div>
              </div>
            ))}{" "}
          </div>
          {!songLoading && currentSong ? (
            <div className="rounded-md bg-black p-2">
              <Image
                src={currentSong.album_cover}
                alt={currentSong.name}
                width={500}
                height={500}
              />
            </div>
          ) : (
            <div className="rounded-md bg-black p-2">
              <Image
                src="/meowl.png"
                alt="Loading.."
                width={500}
                height={500}
              />
            </div>
          )}
          <div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
            {userList.map((user) => (
              <div
                key={user.id}
                className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
              >
                <img src={user.avatar} alt={user.name} width={75} height={75} />
                <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
                  {user.name}
                </div>
              </div>
            ))}{" "}
          </div>
        </div>
        {!songLoading && currentSong && (
          <div className="flex flex-col items-center justify-start">
            <h2
              className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
            >
              {currentSong.artist}
            </h2>
            <h2
              className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
            >
              {currentSong.name}
            </h2>
          </div>
        )}
      </div>

      <div className="flex flex-row items-start justify-start gap-10 rounded bg-blue-950/80 p-4">
        {userList.map((user) => (
          <div
            key={user.id}
            className="flex h-[100px] w-[100px] flex-col items-center justify-center p-4"
          >
            <img src={user.avatar} alt={user.name} width={75} height={75} />
            <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
              {user.name}
            </div>
          </div>
        ))}
      </div>
    </main>
  );
}