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

const Keywords = () => {
    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: KeywordAPIData, fetchStatus, isPending, refetch } = useQuery({ queryKey: [AdminKeywordListAPI, search, params], queryFn: () => CustomFetch({ url: AdminKeywordListAPI, params: { search: search, ...params } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data })

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

    return (
        <KeywordTable
            searchBtnProps={{
                setSearch: setSearch,
                title: "Add Keyword",
                callBack: callBack,
            }}
            apiData={{
                data: KeywordAPIData,
                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 Keywords