import React, { useLayoutEffect, useRef, useState } from 'react';
import { TAB } from '../../constant';
import NotiDropdown from './component/NotiDropdown';
import { useAnimatedListHeight } from './hook/useAnimatedListHeight';
import { useIframeClickBlock } from './hook/useIframeClickBlock';
import { useInfiniteScrollInModal } from './hook/useInfiniteScrollInModal';
import { useNotificationData } from './hook/useNotificationData';
const LIMIT = 15;
const Notification = ({ unreadCount }) => {
    const [showModal, setShowModal] = useState(false);
    const [fetchTick, setFetchTick] = useState(0);
    const [previewModalData, setPreviewModalData] = useState(null);
    const isPreview = !!previewModalData;
    const loadMoreRef = useRef(null);
    const iframeClickRef = useIframeClickBlock();
    const noti = useNotificationData({ limit: LIMIT });
    const animated = useAnimatedListHeight();
    // load first page when open / tab change
    useLayoutEffect(() => {
        if (!showModal)
            return;
        noti.resetList();
        animated.resetForInitLoad();
        noti.fetchFirstPage(noti.activeTab, () => animated.revealAfterInitLoad());
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [showModal, noti.activeTab, fetchTick]);
    // infinite scroll only on list mode
    useInfiniteScrollInModal({
        enabled: showModal && !isPreview,
        target: loadMoreRef,
        rootSelector: '.noti-scroll-root',
        canLoad: !noti.loadingInit && !noti.loadingMore && noti.hasMore,
        onIntersect: noti.loadMore,
    });
    const onCloseAll = () => {
        setShowModal(false);
        setPreviewModalData(null);
        noti.setActiveTab(TAB.ALL);
        animated.cleanup();
    };
    return (React.createElement(NotiDropdown, { animated: animated, noti: noti, onClose: onCloseAll, onOpen: () => {
            setPreviewModalData(null);
            if (showModal) {
                setFetchTick((t) => t + 1);
            }
            else {
                setShowModal(true);
            }
        }, open: showModal, previewDeps: {
            iframeClickRef,
            loadMoreRef,
        }, previewModalData: previewModalData, setPreviewModalData: setPreviewModalData, unreadCount: unreadCount }));
};
export default Notification;
//# sourceMappingURL=index.js.map