import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import {User} from "@/interfaces/user";
import {sendEmailVerification} from "@/utils/email";
import axios from "axios";
import {useState} from "react";
import {toast} from "react-toastify";
import {KeyedMutator} from "swr";

interface Props {
	queryCode?: string;
	isLoading: boolean;
	setIsLoading: (isLoading: boolean) => void;
	mutateUser: KeyedMutator<User>;
	sendEmailVerification: typeof sendEmailVerification;
}

export default function RegisterIndividual({queryCode, isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
	const [name, setName] = useState("");
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");
	const [confirmPassword, setConfirmPassword] = useState("");
	const [code, setCode] = useState(queryCode || "");

	const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!");

	const onError = (e: Error) => {
		console.error(e);
		toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
	};

	const register = (e: any) => {
		e.preventDefault();

		if (confirmPassword !== password) {
			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
			return;
		}

		setIsLoading(true);
		axios
			.post("/api/register", {
				name,
				email,
				password,
				code,
				profilePicture: "/defaultAvatar.png",
			})
			.then((response) => {
				mutateUser(response.data.user).then(() => sendEmailVerification(setIsLoading, onSuccess, onError));
			})
			.catch((error) => {
				console.log(error.response.data);

				if (error.response.status === 401) {
					toast.error("There is already a user with that e-mail!");
					return;
				}

				if (error.response.status === 400) {
					toast.error("The provided code is invalid!");
					return;
				}

				toast.error("There was something wrong, please try again!");
			})
			.finally(() => setIsLoading(false));
	};

	return (
		<form className="flex flex-col items-center gap-6 w-full" onSubmit={register}>
			<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
			<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
			<Input
				type="password"
				name="password"
				onChange={(e) => setPassword(e)}
				placeholder="Enter your password"
				defaultValue={password}
				required
			/>
			<Input
				type="password"
				name="confirmPassword"
				onChange={(e) => setConfirmPassword(e)}
				placeholder="Confirm your password"
				defaultValue={confirmPassword}
				required
			/>
			<Input type="text" name="code" onChange={(e) => setCode(e)} placeholder="Enter your registration code" defaultValue={code} required />

			<Button
				className="lg:mt-8 w-full"
				color="purple"
				disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword || !code}>
				Create account
			</Button>
		</form>
	);
}
