import { useRouter } from 'next/navigation';
import { useDispatch, useSelector } from 'react-redux';
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AppStore } from '@/lib/store';
import { setNotificationDetailState } from '@/lib/Features/UserDetailSidebar/userDetailSidebar';
import usePost from '@/Utils/Hooks/usePost';
import { NotificationAPI } from '@/Utils/APIRequest/Endpoints';
import { resetUnread } from '@/lib/Features/UnreadCountSlice/unreadCountSlice';
import ImageWithFallback from '../Common/ImageWithFallback';

const NotificationList = (props) => {
    const { setIsComponentVisible, item, displayTime, refetch } = props

    const router = useRouter();
    const dispatch = useDispatch()
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    // Patch API
    const { isPending: ReadPending, mutate } = usePost(`${NotificationAPI}?id=${item?.id}`, null, (response) => {
        if (response.status == 200 || response.status == 201) {
            refetch();
        }
    }, 'Patch');

    const goToPage = (item) => {
        setIsComponentVisible && setIsComponentVisible(false);
        mutate();
        if (userDetails?.role == 'brand') {
            let brandRedirectType = {
                campaign_management: `/brand/my-campaigns/${item?.redirect_slug}?tab=Campaign%20Management&id=${item?.redirect_id}`,
                brand_subscription: `/brand/profile/my-subscriptions`,
                ai_report: `/brand/my-campaigns/${item?.redirect_slug}?tab=Influencer%20Pool&id=${item?.redirect_id}&innerTab=Applicants&mode=ai`,
            }
            if (brandRedirectType[item?.redirect_type]) {
                router.push(brandRedirectType[item?.redirect_type])
                if (
                    item?.redirect_type === "campaign_management" &&
                    item?.metadata &&
                    typeof item.metadata === "object" &&
                    !Array.isArray(item.metadata) &&
                    Object.keys(item.metadata).length > 0 &&
                    item.metadata.influencer
                ) {
                    let obj = {
                        slug: item?.redirect_slug,
                        campaignDetailId: item?.redirect_id,
                        influencerData: { influencer: item?.metadata?.influencer }
                    }
                    setTimeout(() => {
                        dispatch(setNotificationDetailState(obj))
                    }, 1000)
                }
            }
        }
        if (userDetails?.role == 'influencer') {
            const jobSlugPath = item?.redirect_slug ? `/influencer/jobs/${item.redirect_slug}` : null;
            let influencerRedirectType = {
                applied: jobSlugPath || "/influencer/jobs?tab=applied",
                invited: jobSlugPath || "/influencer/jobs?tab=invited",
                job_inprogress: "/influencer/my-jobs?tab=inprogress",
                job_closed: "/influencer/my-jobs?tab=closed",
            }
            if (influencerRedirectType[item?.redirect_type]) {
                router.push(influencerRedirectType[item?.redirect_type])
                if (jobSlugPath && item?.redirect_slug && item?.redirect_id) {
                    let obj = {
                        slug: item?.redirect_slug, campaignDetailId: item?.redirect_id
                    }
                    setTimeout(() => {
                        dispatch(setNotificationDetailState(obj))
                    }, 1000)
                }
            }
        }
        if (userDetails?.role == 'admin') {
            let adminRedirectType = {
                influencer_details: `/admin/influencers/${item?.redirect_slug}`,
                brand_details: `/admin/brands/${item?.redirect_slug}`,
            }
            if (adminRedirectType[item?.redirect_type]) {
                router.push(adminRedirectType[item?.redirect_type])
            }
        }
    }

    return (
        <>
            <div className='flex items-start gap-5' onClick={() => goToPage(item)}>
                <div className='min-w-12 w-12 h-12 relative rounded-full overflow-hidden bg-gray'>
                    <ImageWithFallback src={item?.sender?.image} alt='image' className='w-full h-full object-cover' width={48} height={48} />
                </div>

                <div className='flex items-center justify-between flex-1'>
                    <div className='flex flex-col flex-1'>
                        <p className='text-base leading-6 mb-1' dangerouslySetInnerHTML={{ __html: item?.description }}></p>
                        <span className='text-xs whitespace-nowrap text-gray'>{displayTime}</span>
                    </div>
                </div>

                {!item?.is_read && <div className='w-2 h-2 rounded-full bg-red-500 self-center text-xs'></div>}
            </div>
        </>
    )
}

export default NotificationList