"use client";

import { FormBuilder } from "@/components/FormBuilder";
import { Form } from "@/components/ui/form";
import { useGlobal } from "@/context/global";
import { getLoginFormFields } from "@/models/auth";
import {
  getValidateUserSchema,
  ValidateUserSchema,
} from "@/schemas/account/_validateuser";
import { setCsrfToken } from "@/services/getCSRFToken";
import { zodResolver } from "@hookform/resolvers/zod";
import { signIn } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";

export default function LoginForm() {
  const { dict } = useGlobal();

  const router = useRouter();

  const form = useForm<ValidateUserSchema>({
    resolver: zodResolver(getValidateUserSchema(dict)),
    mode: "onChange",
    defaultValues: {
      user: "",
      password: "",
      csrfToken: "",
    },
  });

  const onSubmit = async (values: ValidateUserSchema) => {
    const promise = () =>
      new Promise(async (resolve, reject) => {
        const result = await signIn("credentials", {
          ...values,
          redirect: false,
        });

        if (!result?.ok) {
          reject();
        }

        resolve(result);
      });

    toast.promise(promise, {
      duration: 2000,
      loading: dict.alerts.login.loading,
      success: (data) => {
        router.push("/dashboard");
        return (
          <p>
            {dict.alerts.login.success}{" "}
            <span className="italic">{dict.alerts.general.redirecting}</span>
          </p>
        );
      },
      error: dict.alerts.login.error,
    });
  };

  useEffect(() => {
    const getCsrfToken = async () => {
      const csrfToken = await setCsrfToken();
      form.setValue("csrfToken", csrfToken);
    };

    getCsrfToken();

    return () => {
      form.reset();
    };
  }, []);

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="space-y-4 [&_a]:text-blue-500 [&_a]:underline"
      >
        <FormBuilder
          form={form}
          elements={getLoginFormFields(dict)}
          upperLabel
        />
        <div>
          <p className="text-xs">
            {dict.pages.general.need_support}{" "}
            <Link href={"#"}>{dict.pages.general.contact_us}</Link>
          </p>
        </div>
      </form>
    </Form>
  );
}