"use client";
import React, { use } from "react";

import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/redux/store";
import { useForm, SubmitHandler } from "react-hook-form";
import CustomButton from "@/components/common/CustomButton";

import { useRouter } from "next/navigation";
import { CustomCheckbox } from "@/components/common/CustomCheckbox";
import { ExpertiseOptionValue } from "@/type/checkboxType";

import { useExpertise } from "../hook/useExpertise";

const ExpertisePage = () => {
  const router = useRouter();
  const { expertiseOptions, isLoading } = useExpertise();
  const {
    handleSubmit,
    register,
    control,
    watch,
    formState: { errors },
  } = useForm<ExpertiseOptionValue>();

  const selectedOptions = watch("selectedOptions") || [];
  const isContinueDisabled = selectedOptions.length === 0;
  const onSubmit: SubmitHandler<ExpertiseOptionValue> = (data) => {
    router.push("/register/code");
  };

  return (
    <div className="mx-6 flex min-h-full flex-col items-center justify-center">
      {/* login text */}
      <div className="border-border mt-18 flex min-h-[85vh] w-full flex-col items-center justify-center gap-5 rounded-2xl border py-5">
        <div className="mx-5">
          <div className="text-background font-bricolage text-4xl font-bold md:text-6xl">
            Expertise as Graphic Designer{" "}
          </div>

          {/* text form */}
          <div className="my-10">
            {isLoading ? (
              <div className="flex items-center justify-center py-10">
                <span className="text-lg font-medium">
                  Loading expertises...
                </span>
              </div>
            ) : (
              <form action="" onSubmit={handleSubmit(onSubmit)}>
                <div className="">
                  <CustomCheckbox
                    options={expertiseOptions}
                    name="selectedOptions"
                    control={control}
                  />
                </div>
                <div className="max-w-40">
                  <CustomButton
                    btnText="Continue"
                    type="submit"
                    disabled={isContinueDisabled}
                  />
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ExpertisePage;