import { useRouter } from "@tanstack/react-router";
import { toast } from "sonner";
import {
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { LstCard } from "@/components/ui/lstCard";
import { authClient, useLogout } from "@/lib/authClient";
import { useAppForm } from "@/lib/formStuff";

export default function ChangePassword() {
	//const navigate = useNavigate();
	const logout = useLogout();
	const router = useRouter();
	const form = useAppForm({
		defaultValues: {
			newPassword: "",
			confirmPassword: "",
			currentPassword: "",
		},
		onSubmit: async ({ value }) => {
			if (value.newPassword != value.confirmPassword) {
				toast.error("Passwords do not match");
				return;
			}
			try {
				const { data, error } = await authClient.changePassword({
					newPassword: value.newPassword, // required
					currentPassword: value.currentPassword, // required
					revokeOtherSessions: true,
				});
				console.log("Data", data);
				console.log("Error", error);
				if (data) {
					toast.success("Password has been updated");
					form.reset();
					router.invalidate();
					logout();
					//navigate({ to: "/login" });
				}

				if (error) {
					toast.success(error.message);
				}
			} catch (error) {
				console.log(error);
				// @ts-ignore
				toast.error(error?.response.data.message);
			}
		},
	});

	return (
		<div className="">
			<LstCard className="p-6 w-96">
				<CardHeader>
					<CardTitle>Set a new password</CardTitle>
					<CardDescription>
						After Entering your new password you will need to sign in again.
					</CardDescription>
				</CardHeader>

				<CardContent>
					<form
						onSubmit={(e) => {
							e.preventDefault();
							form.handleSubmit();
						}}
					>
						<form.AppField
							name="currentPassword"
							children={(field) => (
								<field.InputPasswordField
									label="Enter your current password"
									required={true}
								/>
							)}
						/>

						<form.AppField
							name="newPassword"
							// validators={{
							//     onChangeListenTo: ["password"],
							//     onChange: ({ value, fieldApi }) => {
							//         if (
							//             value !==
							//             fieldApi.form.getFieldValue("password")
							//         ) {
							//             return "Passwords do not match";
							//         }
							//         return undefined;
							//     },
							// }}
							children={(field) => (
								<field.InputPasswordField
									label="New password"
									required={true}
								/>
							)}
						/>
						<form.AppField
							name="confirmPassword"
							// validators={{
							//     onChangeListenTo: ["password"],
							//     onChange: ({ value, fieldApi }) => {
							//         if (
							//             value !==
							//             fieldApi.form.getFieldValue("password")
							//         ) {
							//             return "Passwords do not match";
							//         }
							//         return undefined;
							//     },
							// }}
							children={(field) => (
								<field.InputPasswordField
									label="Re-enter your password"
									required={true}
								/>
							)}
						/>

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

					{/* <div className="mt-6 text-center text-sm text-gray-600">
						Remembered your account?{" "}
						<Link
							to="/login"
							className="text-primary underline underline-offset-4 hover:text-primary/80"
						>
							Back to login
						</Link>
					</div> */}
				</CardContent>
			</LstCard>
		</div>
	);
}
