'use client'

import { useState } from "react"
import { useQuery } from "@tanstack/react-query"
import { AdminFAQsAPI } from "@/Utils/APIRequest/Endpoints"
import CustomFetch from "@/Utils/APIRequest/AxiosInstance"
import FaqTable from "./FaqTable"

const AdminFaq = () => {
    const [search, setSearch] = useState('');
    const [modal, setModal] = useState<any>(null);
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [activeTab, setActiveTab] = useState("brand");
    const [params, setParams] = useState({ page: 1, per_page: 50, sort_by: "", sort: "DESC", faq_for: activeTab })

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

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

    const handleTabClick = (tabName) => {
        setActiveTab(tabName);
        setParams({ ...params, faq_for: tabName, page: 1, })
    }

    return (
        <>
            <div className="flex items-center border-b border-lightGray *:py-1 mb-5 *:whitespace-nowrap overflow-hidden overflow-x-auto pb-5 gap-3">
                <span onClick={() => handleTabClick("brand")} className={`${activeTab == 'brand' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    Brand
                </span>
                <span onClick={() => handleTabClick("influencer")} className={`${activeTab == 'influencer' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border !mx-0 rounded-full px-5 py-2 `}>
                    Influencer
                </span>
            </div>
            <FaqTable
                searchBtnProps={{
                    setSearch: setSearch,
                    title: 'Add FAQ',
                    callBack: callBack,
                }}
                apiData={{
                    data: FaqAPIData,
                    params: params,
                    setParams: setParams,
                    isPending: isPending,
                    refetch: refetch,
                    fetchStatus: fetchStatus
                }}
                search={search}
                modal={modal}
                setModal={setModal}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                handleTabClick={handleTabClick}
                activeTab={activeTab}
            />
        </>
    )
}

export default AdminFaq