import { Notification } from 'iconsax-react';
import { FC, useState } from 'react';
import XIcon from '../../assets/images/close-circle.svg';
import { useTranslation } from 'react-i18next';
import { clx } from '../../helpers/utils';
import StatusCircle from '../../components/StatusCircle';
import { useOutsideClick } from '../../hooks/useOutSideClick';
import { useGetNotification, useReadAll } from './hooks/useNotificationData';
import { NotificationItemType } from './types/NotificationTypes';
import { timeAgo } from '../../config/func';
import InfiniteScroll from 'react-infinite-scroll-component';
import MoonLoader from "react-spinners/MoonLoader"
import Button from '../../components/Button';
import { toast } from 'react-toastify';
import { useGetDashboardSummary } from '../home/hooks/useHomeData';

const Notifications: FC = () => {
    const { t } = useTranslation('global');
    const ref = useOutsideClick(() => setShowModal(false));
    const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all');
    const [showModal, setShowModal] = useState<boolean>(false);
    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
    const readAll = useReadAll()
    const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
    const getDashboard = useGetDashboardSummary()

    const handleAllRead = () => {
        readAll.mutate(undefined, {
            onSuccess: () => {
                getDashboard.refetch()
                refetch()
                toast.success(t('success'))
            }
        })
    }

    return (
        <div ref={ref}>
            <div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
                <Notification size={18} color="black" />
                <div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
                    {getDashboard.data?.data?.notificationCount}
                </div>
            </div>

            {showModal && (
                <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
                    <div className="flex justify-between items-center">
                        <div>{t('notif.natification')}</div>
                        <div className="size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center">
                            <img src={XIcon} alt="close" className="w-4 h-4" onClick={() => setShowModal(false)} />
                        </div>
                    </div>



                    <div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
                        <div
                            onClick={() => setActiveTab('all')}
                            className={clx(
                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
                                activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
                            )}
                        >
                            همه
                        </div>
                        <div
                            onClick={() => setActiveTab('unread')}
                            className={clx(
                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
                                activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
                            )}
                        >
                            خوانده نشده
                        </div>
                        <div
                            onClick={() => setActiveTab('read')}
                            className={clx(
                                'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
                                activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
                            )}
                        >
                            خوانده شده
                        </div>
                    </div>

                    <div className='flex mt-4 justify-end'>
                        <Button
                            isLoading={readAll.isPending}
                            onClick={handleAllRead}
                            className={clx(
                                'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
                            )}
                        >
                            {t('notif.all_read')}
                        </Button>
                    </div>

                    <div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
                        <InfiniteScroll
                            dataLength={posts.length}
                            next={fetchNextPage}
                            hasMore={hasNextPage}
                            loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
                            scrollableTarget="notificationsContainer"
                        >
                            {
                                posts.map((item: NotificationItemType) => (
                                    <div className="bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
                                        <div className="mt-1">
                                            <StatusCircle color="#00BA4B" />
                                        </div>
                                        <div>
                                            <div className="truncate max-w-[200px]">{item.message}</div>
                                            <div className="mt-2 flex gap-2 text-[10px] text-description">
                                                <div>{timeAgo(item.createdAt)}</div>
                                                <div className="flex gap-1 items-center">
                                                    <StatusCircle color="#8C90A3" />
                                                    <div>{item.title}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            }
                        </InfiniteScroll>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Notifications;