'use client'
import { useEffect, useState } from 'react'
import CustomFetch from '@/Utils/APIRequest/AxiosInstance'
import { AdminCategoryListAPI } from '@/Utils/APIRequest/Endpoints'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from '@/Utils/Hooks/useTranslate'
import CategoryTable from "./CategoryTable";

const Category = () => {
    const { translations, locale } = useTranslation();
    const [search, setSearch] = useState('');
    const [modal, setModal] = useState<any>(null)
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [params, setParams] = useState({ page: 1, per_page: 50, sort_by: "created_at", sort: "DESC", language_code: locale });

    useEffect(() => {
        setParams((prev) => ({ ...prev, page: 1, language_code: locale }));
    }, [locale]);

    // API GET
    const { data: CategoryAPIData, fetchStatus, isPending, refetch } = useQuery({ queryKey: [AdminCategoryListAPI, search, params], queryFn: () => CustomFetch({ url: AdminCategoryListAPI, params: { search: search, ...params } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data })

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

    return (
        <CategoryTable
            searchBtnProps={{
                setSearch: setSearch,
                title: "Add Category",
                callBack: callBack,
            }}
            apiData={{
                data: CategoryAPIData,
                params: params,
                setParams: setParams,
                isPending: isPending,
                refetch: refetch,
                fetchStatus: fetchStatus
            }}
            search={search}
            modal={modal}
            setModal={setModal}
            deleteModal={deleteModal}
            setDeleteModal={setDeleteModal}
            translations={translations}
            refetch={refetch}
            locale={locale}
        />
    )
}

export default Category;