import CustomButton from "@/components/common/CustomButton";
import { CustomCheckbox } from "@/components/common/CustomCheckbox";
import showCustomToast from "@/components/common/toaster/CustomToast";
import { getExpertise } from "@/lib/services/expertise.services";
import { AuthFormValues } from "@/type/authType";
import { ExpertiseOptionType, ExpertiseOptionValue } from "@/type/checkboxType";
import { APIResponseType } from "@/type/comonType";
import { useQuery } from "@tanstack/react-query";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { SubmitHandler, useFormContext } from "react-hook-form";

interface ExpertiseComponentProps {
  onSubmit: SubmitHandler<AuthFormValues>;
  isLoading?: boolean;
}

const ExpertiseComponent = ({
  onSubmit,
  isLoading,
}: ExpertiseComponentProps) => {
  const { control, register, handleSubmit, watch } = useFormContext<AuthFormValues>();
  const selectedExpertise = watch("expertise_ids") || [];
  const isContinueDisabled = selectedExpertise.length === 0;
  const hasShownToast = useRef(false);

  const {
    data: response,
    error,
    isSuccess,
  } = useQuery<APIResponseType<ExpertiseOptionType[]>>({
    queryKey: ["expertise"],
    queryFn: getExpertise,
  });

  const options =
    isSuccess && Array.isArray(response?.data)
      ? response.data
          .filter((item) => item.uuid)
          .map((items: ExpertiseOptionType) => ({
            id: items.id,
            uuid: items.uuid,
            name: items.name,
            label: items.name,
          }))
      : [];


  return (
    <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">
        <form action="" onSubmit={handleSubmit(onSubmit)}>
          <div className="">
            <CustomCheckbox
              options={options}
              name="expertise_ids"
              control={control}
            />
          </div>
          <div className="mt-5 max-w-40">
            <CustomButton
              btnText="Continue"
              type="submit"
              isLoading={isLoading}
              disabled={isContinueDisabled}
            />
          </div>
        </form>
        {/* rules and regulation       */}
      </div>
    </div>
  );
};

export default ExpertiseComponent;