import { useState } from 'react'
import { useQuery } from '@tanstack/react-query';
import CampaignBox from '@/Component/Common/CampaignBox';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { JobListingAPI } from '@/Utils/APIRequest/Endpoints';
import CampaignBoxSkeleton from './CampaignBoxSkeleton';
import JobDetails from '@/Component/Influencer/InfluencerJobs/JobDetails';
import SectionHeader from '../SectionHeader';

const InvitedJobs = (props) => {
    const { userDetails, translations } = props;
    const [openSideModal, setOpenSideModal] = useState(null);
    const [params, setParams] = useState<any>({ page: 1, per_page: 10, sort_by: "", sort: "DESC", status: "invited" });

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

    return (
        <>
            {fetchStatus == 'fetching' ?
                <>
                    <div className="flex items-center justify-between mb-5">
                        <div className="flex flex-col gap-2">
                            <span className="h-3 w-16 bg-neutral-200 animate-pulse rounded"></span>
                            <span className="h-7 w-40 bg-neutral-200 animate-pulse rounded"></span>
                        </div>
                        <span className="h-9 w-24 bg-neutral-200 animate-pulse rounded-full"></span>
                    </div>
                    <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
                        <CampaignBoxSkeleton />
                        <CampaignBoxSkeleton />
                        <CampaignBoxSkeleton />
                    </div>
                </> :
                <>
                    {data?.length > 0 ?
                        <>
                            <SectionHeader
                                kicker={'📬 ' + (translations?.invitations || 'Invitations')}
                                title={translations?.invitedJobs}
                                actionLabel={data?.length > 3 ? translations?.viewAll : undefined}
                                actionHref={data?.length > 3 ? '/influencer/jobs?tab=invited' : undefined}
                            />
                            <div className='grid md:grid-cols-3 grid-cols-1 gap-4 stagger-children'>
                                {data?.slice(0, 3).map((item, index) => (
                                    <CampaignBox itemData={item} key={index} setOpenSideModal={setOpenSideModal} translations={translations} />
                                ))}
                            </div>
                        </>
                        :
                        null
                    }
                </>
            }
            <JobDetails openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} mainListRefetch={refetch} />
        </>
    )
}

export default InvitedJobs