import { InfluencerFavoriteStarSVG, InfluencerStarSVG, InfluencerWhiteFavoriteStarSVG, InfluencerWhiteStarSVG } from '../SVGs/CommonSVG';
import usePost from '@/Utils/Hooks/usePost';
import { AddRemoveFavoriteAPI } from '@/Utils/APIRequest/Endpoints';
import { useDispatch, useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import { setCurrentSidebarTab, setIsFavoriteList } from '@/lib/Features/UserDetailSidebar/userDetailSidebar';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

const FavoriteToggle = (props) => {
    const { data, setIsFavorite } = props
    const dispatch = useDispatch()
    const pathName = usePathname()

    useEffect(() => {
        if (pathName && pathName.includes("/brand/browse-influencer/user")) {
            dispatch(setCurrentSidebarTab(true))
        }
        return () => {
            dispatch(setCurrentSidebarTab(false))
        }
    }, [pathName])

    const isFavoriteList: any = useSelector((state: AppStore) => state.userDetailSidebar.isFavoriteList);

    const currentSidebarTab: Boolean = useSelector((state: AppStore) => state.userDetailSidebar.currentSidebarTab);

    const { isPending, mutate } = usePost(AddRemoveFavoriteAPI, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
        } else {
            setIsFavorite && setIsFavorite((prev) => !prev);
        }
    }, null);

    const handleToggle = () => {
        let tempFavList = [...isFavoriteList]

        if (tempFavList?.length > 0) {
            if (tempFavList.includes(data?.id)) {
                tempFavList = tempFavList.filter((elem) => elem !== data?.id)
            } else {
                tempFavList.push(data?.id)
            }
        } else {
            tempFavList.push(data?.id)
        }
        dispatch(setIsFavoriteList(tempFavList))
        setIsFavorite && setIsFavorite((prev) => !prev);
        let obj: any = {
            influencer_id: data?.id
        }
        mutate(obj)
    }

    return (
        <>
            {
                currentSidebarTab
                    ?
                    <button type='button' className='cursor-pointer' onClick={handleToggle}>{(isFavoriteList?.includes(data?.id)) ? <InfluencerWhiteFavoriteStarSVG /> : <InfluencerWhiteStarSVG />}</button>
                    :
                    <button type='button' className='cursor-pointer' onClick={handleToggle}>{(isFavoriteList?.includes(data?.id)) ? <InfluencerFavoriteStarSVG /> : <InfluencerStarSVG />}</button>
            }
        </>
    );
}

export default FavoriteToggle;