"use client";
import { useEffect, useState } from "react";
import { api } from "muzak/data/fetcher";
import { useSession } from "muzak/contexts/SessionContext";
import { Nunito } from "next/font/google";
const nunito = Nunito({
  weight: "900",
  subsets: ["latin"],
});

export default function PostGame() {
  const { sessionId, setSessionId } = useSession();
  const [trackCount, setTrackCount] = useState(0);
  const [voteCount, setVoteCount] = useState(0);
  const [averageVote, setAverageVote] = useState(0);

  async function getInfo() {
    const { data: info } = await api.sessions.info({ session_id: sessionId });
    console.log(info);
    setTrackCount(info["track_count"]);
    setVoteCount(info["vote_count"]);
    setAverageVote(info["average_vote"]);
  }
  useEffect(() => {
    getInfo();
  }, []);

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <p
        className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
      >
        Bedankt voor het stemmen!
      </p>
      <div className="flex flex-col text-center">
        <p
          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
        >
          Jullie hebben {voteCount} stemmen uitgebracht op {trackCount} nummers.
        </p>
        <p
          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
        >
          Gemiddeld vonden jullie {(averageVote * 100).toFixed(0)}% van de
          nummers best oké.
        </p>
        <p
          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
        >
          Applaus voor jezelf!
        </p>
      </div>
      <p
        className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
      >
        Tot HDcon!
      </p>
    </main>
  );
}