import React from "react";
import { Formik } from "formik";
import useAuthState from "../../zustand/AuthState";
import useNavigateOnSuccess from "../../Hooks/useNavigateOnSuccess";
import { useLoginAdmin } from "../../api/auth";
import FormField from "./FormField";
import { initialValues } from "./formutils";
import { FormValues } from "../../types/Auth";
import { toast } from "react-toastify";
import { useTranslation } from "react-i18next";

const LoginForm = () => {
  const { mutate, isLoading, isSuccess, data } = useLoginAdmin();
  const [t] = useTranslation();
  const handelSubmit = (values: FormValues) => {

    mutate(values );
  };

  const { login } = useAuthState();
  const LoginData = {
    ...data,
  } as any;
  useNavigateOnSuccess(isSuccess, "/", () => login(LoginData?.data as any));

  return (
    <div className="LoginForm">
      <Formik initialValues={initialValues} onSubmit={handelSubmit}>
        {(formikProps) => <FormField isLoading={isLoading} />}
      </Formik>
    </div>
  );
};

export default LoginForm;