import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { CategoryAPI } from "@/Utils/APIRequest/Endpoints";
import ValidationMsg from "@/Utils/ValidationSchema/ValidationMsg";
import SkeletonLoader from "@/Layout/SkeletonLoader";
import { useTranslation } from "@/Utils/Hooks/useTranslate";

const StepCategory = (props) => {
    const [modal, setModal] = useState<any>(null)
    const { setRegisterState, registerState, translations, errorData, setErrorData, skeletonLoading, maxSelection, minSelection } = props;
    const [params, setParams] = useState({ page: 1, per_page: 50 })
    const { locale } = useTranslation();

    const { data, refetch } = useQuery({ queryKey: [CategoryAPI, params, locale], queryFn: () => CustomFetch({ url: CategoryAPI, params: { ...params, } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data });

    const onChangeHandler = (e) => {
        const { value, checked } = e.target;
        setRegisterState((prev) => {
            const categoriesArray = prev?.categories || [];
            const updatedCategories = checked ? Array.from(new Set([...categoriesArray, value])) : categoriesArray.filter((item) => item !== value);

            // Validation logic after updating industries
            if (updatedCategories.length < minSelection) {
                setErrorData(['minCategories']);
            } else if (updatedCategories.length > maxSelection) {
                setErrorData(['maxCategories']);
            } else {
                setErrorData([]); // Clear errors if the selection is valid
            }

            return { ...prev, categories: updatedCategories };
        });

        setErrorData((prev) => {
            const updatedCategories = registerState?.categories || [];
            const hasError = prev.includes('categories');
            if (hasError && updatedCategories.length > 0) {
                return prev.filter((item) => item !== 'categories');
            } else if (!hasError && updatedCategories.length === 0) {
                return [...prev, 'categories'];
            }
            return prev;
        });
    };

    const callBack = () => {
        setModal(true)
    }

    return (
        <div className="h-full">
            <div className="h-full max-h-full overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray/25 [&::-webkit-scrollbar-thumb]:bg-gray/50">
                <div className='gap-2 flex flex-wrap'>
                    {data?.data?.filter(category => category != null && !category.is_hidden)?.map((category, index) => (
                        <div key={index}>
                            {skeletonLoading ? <SkeletonLoader width="150" height={46} rows={1} /> :
                                <label key={index} className="cursor-pointer">
                                    <input type='checkbox' name='categories' value={category?.id} className="hidden peer"
                                        onChange={onChangeHandler} checked={registerState?.categories?.includes(category?.id)} />
                                    <div className="border border-gray rounded-md leading-6 p-2.5 peer-checked:bg-gradient-to-br from-secondary to-primary peer-checked:text-white peer-checked:font-medium text-sm">{category?.translations?.[0]?.title}</div>
                                </label>
                            }
                        </div>
                    ))}
                </div>
                {(errorData.includes("minCategories") || errorData.includes("maxCategories")) && (
                    <ValidationMsg
                        errorMsg={
                            errorData.includes("minCategories")
                                ? `${translations?.industryMinRequired} ${minSelection} ${translations?.categoryHeaderTitle}`
                                // : `${translations?.industryMaxRequired} ${maxSelection} ${translations?.facebooklabel4}`
                                : `${translations?.industryMaxRequired}`
                        }
                    />
                )}
            </div>
        </div>
    )
}

export default StepCategory