import { Link, useNavigate } from "@tanstack/react-router";
import { toast } from "sonner";
import {
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { api } from "@/lib/axiosAPI";
import { useAppForm } from "@/lib/formStuff";
import { LstCard } from "@/routes/_old/old/-components/extendedUi/LstCard";

export default function SignupForm() {
	const navigate = useNavigate();
	const form = useAppForm({
		defaultValues: {
			username: "",
			email: "",
			password: "",
			confirmPassword: "",
		},
		onSubmit: async ({ value }) => {
			if (value.password != value.confirmPassword) {
				toast.error("Passwords do not match");
				return;
			}
			try {
				const res = await api.post("/api/user/register", {
					username: value.username,
					name: value.username,
					email: value.email,
					password: value.password,
				});

				if (!res.data.success) {
					toast.error(res.data.message);
				}

				if (res.data.success) {
					form.reset();
					navigate({ to: "/" });
					toast.success(`Welcome ${value.username}, to lst.`);
				}
			} catch (error) {
				console.log(error);
				// @ts-ignore
				toast.error(error?.response.data.message);
			}
		},
	});
	return (
		<div className="">
			<LstCard className="p-6 w-96">
				<CardHeader>
					<CardTitle>Create an account</CardTitle>
					<CardDescription>Fill in your details to get started</CardDescription>
				</CardHeader>

				<CardContent>
					<form
						onSubmit={(e) => {
							e.preventDefault();
							form.handleSubmit();
						}}
					>
						{/* Username */}
						<form.AppField
							name="username"
							children={(field) => (
								<field.InputField
									label="Username"
									inputType="text"
									required={true}
								/>
							)}
						/>

						{/* Email */}
						<form.AppField
							name="email"
							children={(field) => (
								<field.InputField
									label="Email address"
									inputType="email"
									required={true}
								/>
							)}
						/>

						{/* Password */}
						<form.AppField
							name="password"
							children={(field) => (
								<field.InputField
									label="Password"
									inputType="password"
									required={true}
								/>
							)}
						/>

						{/* Confirm Password */}
						<form.AppField
							name="confirmPassword"
							children={(field) => (
								<field.InputField
									label="Confirm Password"
									inputType="password"
									required={true}
								/>
							)}
						/>

						<div className="flex justify-end mt-6">
							<form.AppForm>
								<form.SubmitButton>Sign Up</form.SubmitButton>
							</form.AppForm>
						</div>
					</form>

					<div className="mt-6 text-center text-sm text-gray-600">
						Already have an account?{" "}
						<Link
							to={"/login"}
							className="text-primary underline underline-offset-4 hover:text-primary/80"
						>
							Log in
						</Link>
					</div>
				</CardContent>
			</LstCard>
		</div>
	);
}
