'use client';

import { GradingForm, TestCard } from '@/components/custom';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import useSWR from 'swr';
import { fetcher } from '@/lib/fetcher';
import Image from "next/image";
import Logo from "/images/logo.svg";
import LogOut from "@images/logout.svg";

export default function Play() {
	const router = useRouter();
	const [password, setPassword] = useState<string | null>('');

	const { data, error, isLoading } = useSWR('/api/test?key=' + password, fetcher);

	useEffect(() => {
		const pass = localStorage.getItem('@password');
		setPassword(pass);
		if (!pass) {
			router.push('/');
		}
	}, [router]);

	return (
		<div className={"w-full h-[100vh] text-[#F0F0F0] bg-black p-12 flex flex-col items-center justify-center gap-y-28"}>
			<Image src={Logo} alt={"Logo"} width={100} height={200} className={"mx-auto w-full md:w-[400px]"}/>
			<TestCard data={data} error={error} isLoading={isLoading} />
			{data && console.log(data)}
			{data && data.status == 200 && password && <GradingForm password={password} data={data} />}
			<div>
				<button
					onClick={() => {
						localStorage.clear();
						router.push('/');
					}}
				>
					<Image src={LogOut} alt={"Logo"} width={100} height={200} className={"mx-auto w-full md:w-[400px]"}/>
				</button>
			</div>
		</div>
	);
}