import { useEffect, useState } from 'react';
import CampaignDetailTabsHeader from '../CampaignDetailTabsHeader'
import { InfluencerListAPI } from '@/Utils/APIRequest/Endpoints';
import usePost from '@/Utils/Hooks/usePost';
import InfluencerBox from '@/Component/Common/InfluencerBox';
import InfluencerPoolBox from './InfluencerPoolBox';
import SidebarModal from '@/Component/Brand/BrowseInfluencer/SidebarModal';
import InfluencerPoolBoxSkeleton from './InfluencerPoolBoxSkeleton';

const InfluencerPoolRecommendation = (props) => {
    const { poolActiveTab, skeletonLoading, startSkeletonLoading, stopSkeletonLoading, activeTab, translations } = props;
    const [listingData, setListingData] = useState(false);
    const [platforms, setPlatforms] = useState([]);
    const [openSideModal, setOpenSideModal] = useState(null);
    const [influencerListData, setInfluencerListData] = useState<any>([]);
    const [filteredValue, setFilteredValue] = useState<any>({});

    const [params, setParams] = useState<any>({
        page: 1,
        per_page: 12,
        sort_by: "",
        sort: "DESC",
        platforms: platforms,
    });

    // Get API
    const { data:ListData, isPending, mutate } = usePost(InfluencerListAPI, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            stopSkeletonLoading();
        }
    }, null);

    useEffect(() => {
        if (isPending) {
            startSkeletonLoading();
        } else {
            stopSkeletonLoading();
        }
        if (ListData?.data?.data?.length > 0) {
            setInfluencerListData([...ListData?.data?.data]);
        } else {
            setInfluencerListData([]);
        }
    }, [isPending, ListData?.data?.data]);

    return (
        <>
            <CampaignDetailTabsHeader poolActiveTab={poolActiveTab} setParams={setParams} setListingData={setListingData} listingData={listingData} mutate={mutate} params={params} setPlatforms={setPlatforms} platforms={platforms} activeTab={activeTab} translations={translations} />
            {isPending ?
                <div className={`${listingData ? 'grid-cols-1' : '3xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'} grid gap-2.5 mt-4`}>
                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                </div>
                :
                <>
                    {(influencerListData?.length > 0) ?
                        <>
                            <div className={`${listingData ? 'grid-cols-1' : '3xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'} grid gap-2.5 mt-4`}>
                                {influencerListData?.map((influencer, index) => (
                                    <div key={index}>
                                        <InfluencerPoolBox setOpenSideModal={setOpenSideModal} data={influencer} skeletonLoading={skeletonLoading} listingData={listingData} index={index} translations={translations} />
                                    </div>
                                ))}
                            </div>
                            {/* {hasMoreResults == 1 &&
                                <PrimaryButton customClass="mt-4 flex items-center justify-center gap-2" onClick={() => loadMore()}>
                                    Load More
                                    {isLoading && <LoaderSVG />}
                                </PrimaryButton>} */}
                        </>
                        :
                        <>
                            {!isPending && influencerListData?.length == 0 &&
                                <div className='w-full bg-lightPrimary p-5 rounded-lg flex items-center justify-center mt-4'>{translations?.noDataFound}</div>
                            }
                        </>
                    }
                </>
            }
            <SidebarModal openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} translations={translations} filteredValue={filteredValue} setFilteredValue={setFilteredValue}  />
        </>
    )
}

export default InfluencerPoolRecommendation