"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const constant_1 = require("../../constant");
const NotiDropdown_1 = tslib_1.__importDefault(require("./component/NotiDropdown"));
const useAnimatedListHeight_1 = require("./hook/useAnimatedListHeight");
const useIframeClickBlock_1 = require("./hook/useIframeClickBlock");
const useInfiniteScrollInModal_1 = require("./hook/useInfiniteScrollInModal");
const useNotificationData_1 = require("./hook/useNotificationData");
const LIMIT = 15;
const Notification = ({ unreadCount }) => {
    const [showModal, setShowModal] = (0, react_1.useState)(false);
    const [fetchTick, setFetchTick] = (0, react_1.useState)(0);
    const [previewModalData, setPreviewModalData] = (0, react_1.useState)(null);
    const isPreview = !!previewModalData;
    const loadMoreRef = (0, react_1.useRef)(null);
    const iframeClickRef = (0, useIframeClickBlock_1.useIframeClickBlock)();
    const noti = (0, useNotificationData_1.useNotificationData)({ limit: LIMIT });
    const animated = (0, useAnimatedListHeight_1.useAnimatedListHeight)();
    // load first page when open / tab change
    (0, react_1.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
    (0, useInfiniteScrollInModal_1.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(constant_1.TAB.ALL);
        animated.cleanup();
    };
    return (react_1.default.createElement(NotiDropdown_1.default, { 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 }));
};
exports.default = Notification;
//# sourceMappingURL=index.js.map