"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 } from "react-hook-form";
import { AuthFormValues } from "@/type/authType";

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

interface CompleteRegistrationPage {
  control: Control<AuthFormValues>;
}

const CompleteRegistrationPage = ({}: CompleteRegistrationPage) => {
  const dispatch = useDispatch();
  const isTrue = useSelector((state: RootState) => state.toggle.value);
  const router = useRouter();
  const {
    handleSubmit,
    register,
    control,
    watch,
    formState: { errors },
  } = useForm<AuthFormValues>();
  const onSubmit: SubmitHandler<AuthFormValues> = (data) => {
    console.log("======Data=========", data);

    // router.push("/register/expertise");
  };

  return (
    <div className="mx-6 flex min-h-screen flex-col items-center justify-center">
      {/* login text */}
      <div className="border-border mt-18 mb-5 flex min-h-[85vh] w-full flex-col items-center rounded-2xl border py-14">
        <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>
    </div>
  );
};

export default CompleteRegistrationPage;