"use client";
import ValidationError from "@/components/ValidationError";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Card, Spinner } from "flowbite-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import type { FC } from "react";
import { FormProvider, useForm } from "react-hook-form";
import Button from "../Button";
import { InputField } from "../forms/Inputs";
import { TSuserSchema, userSchema } from "../forms/schema/user";

const SignUp: FC = () => {
  const router = useRouter();
  const queryClient = useQueryClient();

  const userForm = useForm<TSuserSchema>({
    resolver: zodResolver(userSchema),
    mode: "onChange",
  });

  const {
    handleSubmit,
    formState: { errors },
  } = userForm;
  const url = `${process.env.NEXT_PUBLIC_API}/api/v1/auth/signup`;
  const {
    mutate: submit,
    isPending,
    isError,
    error = {} as any,
  } = useMutation({
    mutationFn: async (userData: TSuserSchema) =>
      await axios.post(url, userData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["users"] });
      router.push("/sign-in");
    },
  });

  const onSubmit = (data: TSuserSchema) => {
    submit(data);
  };

  return (
    <>
      {isError && (
        <ValidationError
          message={error.message}
          data={error?.response?.data?.errors}
        />
      )}
      <div className="flex flex-col items-center justify-center px-5 lg:h-screen  lg:gap-y-10">
        <Link href="/" className="my-2 flex items-center gap-x-1 lg:my-0">
          <img alt="logo" src="/static/images/logo.png" className="mr-1 h-10" />
        </Link>
        <Card
          horizontal
          imgAlt="create-account"
          className="w-full md:max-w-[1024px] md:[&>*]:w-full md:[&>*]:p-6 [&>img]:hidden md:[&>img]:w-96 md:[&>img]:p-0 lg:[&>img]:block"
        >
          <h1 className="mb-3 text-2xl font-bold dark:text-white md:text-3xl">
            Create Account
          </h1>
          <FormProvider {...userForm}>
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="mb-4 flex flex-col gap-y-3">
                <InputField
                  labelText="Your Name"
                  name="name"
                  placeholder="Name"
                  errors={errors}
                />
              </div>
              <div className="mb-4 flex flex-col gap-y-3">
                <InputField
                  labelText="Your Email"
                  name="email"
                  placeholder="name@company.com"
                  inputType="email"
                  errors={errors}
                />
              </div>
              <div className="mb-6 flex flex-col gap-y-3">
                <InputField
                  labelText="Your Password"
                  name="password"
                  placeholder="••••••••"
                  inputType="password"
                  errors={errors}
                />
              </div>
              <div className="mb-6 flex flex-col gap-y-3">
                <InputField
                  labelText="Confirm Password"
                  name="confirm"
                  placeholder="••••••••"
                  inputType="password"
                  errors={errors}
                />
              </div>
              <div className="mb-7">
                <Button
                  buttonType="submit"
                  className="w-full lg:w-auto"
                  color="blue"
                >
                  {isPending && (
                    <Spinner
                      aria-label="spinner button example"
                      size="sm"
                      className="mr-1"
                    />
                  )}
                  Create account
                </Button>
              </div>
              <p className="text-sm text-gray-500 dark:text-gray-300">
                Already have an account?&nbsp;
                <Link
                  href="/sign-in"
                  className="text-primary-600 dark:text-primary-200"
                >
                  Login here
                </Link>
              </p>
            </form>
          </FormProvider>
        </Card>
      </div>
    </>
  );
};

export default SignUp;