import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { AppStore } from '@/lib/store';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { RecommendListingAPI } from '@/Utils/APIRequest/Endpoints';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { useQuery } from '@tanstack/react-query';
import React, { useState } from 'react'
import { useSelector } from 'react-redux';
import RecommendInfluencerTable from './RecommendInfluencerTable';
import AddInfluencerModal from './AddInfluencerModal';

const RecommendInfluencer = (props) => {
    const { campaignId, userDetails, translations } = props;
    const [openSideModal, setOpenSideModal] = useState(null);
    const [addInfluencerModal, setAddInfluencerModal] = useState(false);
    const [params, setParams] = useState<any>({ page: 1, per_page: 20, sort_by: "", sort: "ASC", campaign_id: campaignId });
    const [search, setSearch] = useState('');

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


    const callbackFunction = () => {
        setAddInfluencerModal(true)
    }

    return (
        <>
            <RecommendInfluencerTable
                searchBtnProps={{
                    setSearch: setSearch,
                    title: "Add Influencer",
                    callBack: callbackFunction
                }}
                apiData={{
                    userDetails: userDetails,
                    data: data,
                    params: params,
                    setParams: setParams,
                    isPending: isPending,
                    fetchStatus: fetchStatus
                }}
                search={search}
                enableMultiDelete={true}
                translations={translations}
            />
            {addInfluencerModal && <AddInfluencerModal addInfluencerModal={addInfluencerModal} setAddInfluencerModal={setAddInfluencerModal} campaignId={campaignId} refetch={refetch} userDetails={userDetails} />}
        </>
    )
}

export default RecommendInfluencer