'use client'
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdvertisementListAPI } from '@/Utils/APIRequest/Endpoints';
import AdBannerTable from './AdBannerTable';
import { useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import Loader from '@/Layout/Loader';

const AdBanner = () => {
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    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: 10, sort_by: "", sort: "DESC", advertisement_for: activeTab })

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

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

    const handleTabClick = (tabName) => {
        setActiveTab(tabName);
        setParams({ ...params, advertisement_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>
            <AdBannerTable
                searchBtnProps={{
                    setSearch: setSearch,
                    title: 'Add Banner',
                    callBack: callBack,
                }}
                apiData={{
                    data: AdBannerAPIData,
                    params: params,
                    setParams: setParams,
                    isPending: isPending,
                    refetch: refetch,
                    fetchStatus: fetchStatus
                }}
                search={search}
                modal={modal}
                setModal={setModal}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                handleTabClick={handleTabClick}
                activeTab={activeTab}
                userDetails={userDetails}
            />
        </>
    )
}

export default AdBanner