/* eslint-disable react-hooks/exhaustive-deps */

"use client";

import { useState } from "react";

import { LoginForm } from "@/components/widget/login-form/login-form";
import { useLoginMutation } from "@/services/locale-api/auth/auth.service";
import { passwordValidation } from "@/validations/form-rules/password-rules";
import { checkEmail } from "@/validations/form-rules/rules/mail-rules";
import { requiredRule } from "@/validations/form-rules/rules/required-rule";

import { useAuth } from "../../hooks/use-auth";

const Login = () => {
  const auth = useAuth();
  const [errorMessage, setErrorMessage] = useState("");
  const loginMutation = useLoginMutation({
    onSuccess: (data) => {
      auth.setAuth({ accessToken: data.data.access_token });
      window.location.replace("/?check=information");
    },
    onError: (error) => {
      setErrorMessage(
        (error as any)?.response?.data?.errors?.[0]?.message ||
          // @todo - this message should be come from backend
          "Kullanıcı bilgisi bulunamadı.Lütfen bilgilerinizi kontrol ediniz.",
      );
    },
  });

  if (auth.isAuthenticated) return null;

  return (
    <div className="flex h-full min-h-[80vh] items-center justify-center">
      <LoginForm
        isSuccess={loginMutation.isSuccess}
        isLoading={loginMutation.isLoading}
        onSubmit={(values) => {
          loginMutation.mutate({
            username: values.email,
            password: values.password,
          });
        }}
        validations={{
          email: {
            required: requiredRule,
            validate: checkEmail,
          },
          password: passwordValidation,
        }}
        errorMessage={errorMessage}
      />
    </div>
  );
};

export default Login;