import PrimaryButton from "@/components/button/PrimaryButton";
import PasswordInput from "@/components/input/PasswordInput";
import TextInput from "@/components/input/TextInput";
import { useAuth } from "@/providers/AuthProvider";
import { Navigate, useNavigate } from "react-router";


export default function LoginPage(){
	const { jwt, setJwt } = useAuth();
	const navigate = useNavigate();


	const login = async (formData: FormData) => {
		const username = formData.get("username") as string;
		const password = formData.get("password") as string;


		const response = await fetch(`${import.meta.env.VITE_API_URL}/auth/token`, {
			method: "GET",
			headers: {
				Authorization: "Basic " + btoa(`${username}:${password}`)
			},
			credentials: "include"
		});

		if(response.status === 200){
			const json = await response.json();
			setJwt(json.token);
			navigate("/raidGroup");
		}
		else{
			//TODO: Handle error
		}
	}


	if(jwt){
		return <Navigate to="/"/>;
	}


	return (
		<form
			action={login}
			className="flex flex-col justify-center space-y-8"
		>
			<TextInput
				id="username"
				name="username"
				placeholder="Username"
			/>
			<PasswordInput
				id="password"
				name="password"
				placeholder="Password"
			/>
			<PrimaryButton
				className="mx-auto"
				type="submit"
			>
				Login
			</PrimaryButton>
		</form>
	);
}