/* eslint-disable jsx-a11y/anchor-is-valid */
"use client";
import { InputField } from "@/components/forms/Inputs";
import { TSloginSchema, loginSchema } from "@/components/forms/schema/login";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button, Card, Spinner } from "flowbite-react";
import { signIn } from "next-auth/react";
import Link from "next/link";
import type { FC } from "react";
import { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";

type props = {
  searchParams?: Record<"callbackUrl" | "error", string>;
};

const SignInPage: FC = function (props: props) {
  const [loading, setLoading] = useState(false);
  const loginForm = useForm<TSloginSchema>({
    resolver: zodResolver(loginSchema),
    mode: "onChange",
  });

  const {
    handleSubmit,
    formState: { errors },
  } = loginForm;

  const submit = async (data: TSloginSchema) => {
    setLoading(true);
    const res = await signIn("credentials", {
      ...data,
      redirect: true,
      callbackUrl: "/",
    }).catch((error: any) => {
      setLoading(false);
    });
    setLoading(false);
  };

  return (
    <>
      <div className="flex flex-col items-center justify-center px-2 lg:h-screen lg:gap-y-5">
        <Link href="/" className="my-6 flex items-center gap-x-1 lg:my-0">
          <img alt="logo" src="/static/images/logo.png" className="mr-3 h-10" />
        </Link>
        <Card
          horizontal
          className="w-full md:max-w-[500px] md:[&>*]:w-full px-2  lg:[&>img]:block rounded-3xl border-2 border-rose-500 shadow-gray-200 "
        >
          {props?.searchParams?.error && (
            <div className="text-red-500">User name or password not match!</div>
          )}
          <h1 className="mb-3 text-xl font-medium text-center text-gray-500 dark:text-white md:text-3xl">
            Login
          </h1>
          <FormProvider {...loginForm}>
            <form onSubmit={handleSubmit(submit)}>
              <div className="mb-4 flex flex-col gap-y-3">
                <InputField
                  labelText="Username"
                  name="username"
                  placeholder="username"
                  inputType="text"
                  errors={errors}
                />
              </div>
              <div className="mb-6 flex flex-col gap-y-3">
                <InputField
                  labelText="Password"
                  name="password"
                  placeholder="••••••••"
                  inputType="password"
                  errors={errors}
                />
              </div>
              <div className="mb-6">
                <Button
                  type="submit"
                  className=" bg-gray-400 w-full"
                  color="blue"
                >
                  {loading && (
                    <Spinner
                      aria-label="spinner button"
                      size="sm"
                      className="mr-1"
                    />
                  )}
                  Login
                </Button>
                <div className="mt-6 text-center">
                  <Link
                    href="/forgot-password"
                    className="w-1/2 text-center text-sm text-primary-600 dark:text-primary-300"
                  >
                    Lost Password?
                  </Link>
                </div>
              </div>
              {/* <p className="ml-20 mt-8 text-sm text-gray-500 dark:text-gray-300">
              Not registered?&nbsp;
              <Link
                href="/sign-up"
                className="text-primary-600 dark:text-primary-300"
              >
                Create account
              </Link>
            </p> */}
            </form>
          </FormProvider>
        </Card>
      </div>
    </>
  );
};

export default SignInPage;