"use client";
import React, { use } from "react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Field } from "@/components/ui/field";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/redux/store";
import Link from "next/link";
import {
  useForm,
  SubmitHandler,
  Control,
  UseFormRegister,
  UseFormWatch,
  FieldErrors,
  useFormContext,
} from "react-hook-form";
import { AuthFormValues } from "@/type/authType";

import CustomForm from "@/components/common/CustomForm";
import { useRouter } from "next/navigation";

interface CompleteRegistrationPage {
  onSubmit: SubmitHandler<AuthFormValues>;
}

const CompleteRegistrationPage = ({ onSubmit }: CompleteRegistrationPage) => {
  const dispatch = useDispatch();
  const isTrue = useSelector((state: RootState) => state.toggle.value);
  const router = useRouter();
  const {
    control,
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useFormContext<AuthFormValues>();

  return (
    <div className="mx-6 flex min-h-screen flex-col items-center justify-start">
      {/* login text */}
      <div className="mx-5 flex flex-col gap-5">
        <div className="text-background font-bricolage text-5xl font-bold md:text-6xl">
          Complete <br /> Registration
        </div>

        {/* text form */}
        <div className="">
          <form action="" onSubmit={handleSubmit(onSubmit)}>
            <Field className="font-manrope max-w-sm">
              <CustomForm
                type="completeRegistration"
                register={register}
                errors={errors}
                control={control}
                watch={watch}
              />
            </Field>
          </form>
          {/* rules and regulation       */}

          <div className="text-secondary-text font-manrope mt-20 text-sm font-light">
            By clicking{" "}
            <span className="font-semibold">
              &quot;Register now/Login&quot;
            </span>{" "}
            you agree to our <span className="font-semibold">Terms</span>. Learn{" "}
            <br /> how we process your data in our
            <Link href="/privacy-policy" className="ml-1">
              <span className="font-semibold hover:underline">
                privacy policy
              </span>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CompleteRegistrationPage;