'use client'
import { useSelector } from 'react-redux';
import { useRouter } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import moment from 'moment';
import { NotificationAPI } from '@/Utils/APIRequest/Endpoints';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AppStore } from '@/lib/store';
import ImageWithFallback from '../Common/ImageWithFallback';
import NotificationSkeleton from './NotificationSkeleton';
import CustomPagination from '../Common/Tables/CustomPagination';
import { useState } from 'react';
import NotificationList from './NotificationList';
import { useTranslation } from '@/Utils/Hooks/useTranslate';

const Notifications = () => {
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const { translations } = useTranslation();
    const router = useRouter();
    const [params, setParams] = useState({ page: 1, per_page: 10 });

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

    return (
        <div>
            <div className='rounded-xl bg-white lg:px-5 px-3'>
                {(isPending || fetchStatus == 'fetching') ?
                    <div className={`*:py-5 *:border-b *:border-lightGray last-of-type:border-0 first:pt-0`}>
                        <NotificationSkeleton />
                        <NotificationSkeleton />
                        <NotificationSkeleton />
                        <NotificationSkeleton />
                    </div>
                    :
                    NotificationData?.data?.length > 0 ?
                        NotificationData?.data?.map((elem, i) => {
                            const createdAt = moment.utc(elem?.created_at || elem?.time).local();
                            let displayTime;

                            if (createdAt.isSame(moment(), 'day')) {
                                displayTime = createdAt.fromNow(true) + " ago";
                            } else if (createdAt.isSame(moment().subtract(1, 'day'), 'day')) {
                                displayTime = 'Yesterday';
                            } else {
                                displayTime = createdAt.format('DD MMM YYYY hh:mm A');
                            }

                            return (
                                <div className={`cursor-pointer lg:py-5 py-3 border-b border-lightGray last-of-type:border-0 last:mb-0`} key={i}>
                                    <NotificationList item={elem} displayTime={displayTime} />
                                </div>
                            )
                        })
                        :
                        <div className='text-center font-semibold bg-primary/10 rounded-md p-5 text-sm'>{translations.noDataFound}</div>
                }
            </div>
            {NotificationData?.total > 10 &&
                <CustomPagination total={NotificationData?.total} currentPageObj={params} setParams={setParams} />}
        </div>
    )
}

export default Notifications