import { useDispatch, useSelector } from 'react-redux';
import { ArchiveFillSVG, ArchiveSVG } from '@/Component/Common/SVGs/CommonSVG';
import { toggleSavedCampaign } from '@/lib/Features/UserDetailSidebar/userDetailSidebar';
import { AddRemoveSavedCampaignAPI } from '@/Utils/APIRequest/Endpoints';
import usePost from '@/Utils/Hooks/usePost';
import { AppStore } from '@/lib/store';

const JobSavedToggle = (props) => {
    const { data, setIsSaved } = props;
    const dispatch = useDispatch();
    const isSaved = useSelector((state: AppStore) => state.userDetailSidebar.savedCampaigns[data.id]) ?? data.isCampaignSaved;

    const { isPending, mutate } = usePost(AddRemoveSavedCampaignAPI, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
        } else {
            dispatch(toggleSavedCampaign({ campaignId: data.id, value: !isSaved }));
        }
    }, null);

    const handleToggle = () => {
        dispatch(toggleSavedCampaign({ campaignId: data.id, value: !isSaved }));
        let obj: any = {
            campaign_id: data?.id
        }
        mutate(obj)
    }

    return (
        <>
            <button type='button' className='cursor-pointer' onClick={handleToggle}>{isSaved == 1 ? <ArchiveFillSVG /> : <ArchiveSVG />}</button>
        </>
    );
}

export default JobSavedToggle