import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { AdminUserSocialMediaPostsListAPI } from "@/Utils/APIRequest/Endpoints";
import ImageWithFallback from "../../ImageWithFallback";
import SkeletonLoader from "@/Layout/SkeletonLoader";
import { CommentsSVG, EyeWhiteSVG, FacebookLikeSVG } from "../../SVGs/CommonSVG";
import { formatNumber } from "@/Utils/Other/FormateNumbers";
import moment from "moment";

const TrendingFacebookPosts = (props) => {
    const { postId, translations, skeletonLoading, stopSkeletonLoading } = props;
    const [params, setParams] = useState({ social_type: 'facebook', post_id: '', type: 'trending' });

    // GET API
    const { data: PostsData, isPending } = useQuery({ queryKey: [AdminUserSocialMediaPostsListAPI, params], queryFn: () => CustomFetch({ url: AdminUserSocialMediaPostsListAPI, params: { ...params, post_id: postId } }, null, false), enabled: !!postId, refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    useEffect(() => {
        setParams({ social_type: 'facebook', post_id: postId, type: 'trending' });
        if (!isPending) {
            stopSkeletonLoading();
        }
    }, [isPending, postId]);

    return (
        <>
            {(postId !== '' && PostsData?.length > 0) ? (
                <div className='grid grid-cols-5 gap-4'>
                    {PostsData?.slice(0, 5)?.map((item, index) => (
                        <div className='w-full overflow-hidden rounded-xl aspect-square bg-gray/20 relative' key={index}>
                            {skeletonLoading ? <SkeletonLoader width="298" height={298} rows={1} /> :
                                <>
                                    <ImageWithFallback src={item?.thumbnails} alt="Post" width={298} height={298} className='w-full h-full object-cover' />
                                    <div className='absolute left-0 right-0 w-full bottom-0 p-3 '>
                                        <div className="flex flex-col gap-1 items-start">
                                            <div className="bg-black/50 z-10 inline-flex items-center px-2 py-0.5 rounded-lg gap-5">
                                                <span className='text-white font-semibold text-sm'>{moment.utc(item?.created_at).format("MMMM DD, YYYY")}</span>
                                            </div>
                                            <div className="bg-black/50 z-10 inline-flex items-center px-2 py-1 rounded-lg gap-3.5">
                                                <div className='flex items-center gap-1.5'>
                                                    <FacebookLikeSVG />
                                                    <span className='text-white font-semibold'>{formatNumber(item?.like_counts)}</span>
                                                </div>
                                                <div className='flex items-center gap-1.5'>
                                                    <CommentsSVG />
                                                    <span className='text-white font-semibold'>{formatNumber(item?.comment_count)}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </>
                            }
                        </div>
                    ))}
                </div>
            ) : (
                <span className="text-sm text-red-500">{translations?.noDataFound}</span>
            )
            }
        </>
    )
}

export default TrendingFacebookPosts