import DrawerHeader from "./DrawerHeader";
import DrawerControls from "./DrawerControls";
import { ViewMode } from "../../../constants";
import CardView from "./CardView";
import ListView from "./ListView";
import React, { useContext, useEffect, useRef } from "react";
import { getFetchHistoryParams } from "../../../../../hooks/useNotifications";
import { FEAGlobals } from "../../../../../../common";
import { NotificationsContext } from "../../../notificationsContext";
const LAZY_LOAD_NO_MORE_PAGES = -1;
export const NotificationCenterMainView = (props) => {
    const scrollContainer = useRef(null);
    const nextPageToFetch = useRef(1);
    const notificationsContext = useContext(NotificationsContext);
    const { drawerControlProps } = notificationsContext;
    const getScrollPercentage = () => {
        var _a, _b, _c, _d, _e, _f;
        const maxScroll = ((_b = (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0) - ((_d = (_c = scrollContainer.current) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0);
        const currentScroll = (_f = (_e = scrollContainer.current) === null || _e === void 0 ? void 0 : _e.scrollTop) !== null && _f !== void 0 ? _f : 0;
        return currentScroll / maxScroll;
    };
    const lazyLoadNextPage = async () => new Promise(async (resolve) => {
        if (nextPageToFetch.current > 0) {
            const [options, filter] = getFetchHistoryParams(props.config, props.defaultParams);
            options.pageNumber = nextPageToFetch.current;
            const notificationList = await FEAGlobals.FSBL.Clients.NotificationClient.fetchHistory(options, filter);
            if (notificationList.length) {
                nextPageToFetch.current = nextPageToFetch.current + 1;
                for (const notification of notificationList) {
                    props.addNotification(notification);
                }
            }
            else {
                // Stop fetching after this one
                nextPageToFetch.current = LAZY_LOAD_NO_MORE_PAGES;
            }
        }
        resolve();
    });
    useEffect(() => { }, [props.notifications, props.isDocked]);
    useEffect(() => {
        var _a;
        const scrollHandler = () => {
            if (getScrollPercentage() > 0.9) {
                lazyLoadNextPage();
            }
        };
        (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollHandler);
        return () => {
            var _a;
            (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", scrollHandler);
        };
    }, []);
    useEffect(() => {
        const recursiveLoad = async () => {
            // Cater for the case where there is no scroll bar to trigger lazy load - keep loading until scrollbar or no pages
            await lazyLoadNextPage();
            if (getScrollPercentage() === 1 && nextPageToFetch.current != LAZY_LOAD_NO_MORE_PAGES) {
                recursiveLoad();
            }
        };
        recursiveLoad();
    }, [props.viewMode, drawerControlProps.active]);
    return (React.createElement(React.Fragment, null,
        React.createElement(DrawerHeader, { isDocked: props.isDocked, toggleDockedStatus: props.toggleDocking }),
        React.createElement(DrawerControls, null),
        React.createElement("div", { className: "cards-container", ref: scrollContainer }, props.viewMode === ViewMode.CARD ? (React.createElement(CardView, { notifications: props.notifications, notificationCard: props.notificationCard })) : (React.createElement(ListView, { notifications: props.notifications, notificationHeaderRow: props.notificationHeaderRow, notificationListRow: props.notificationListRow })))));
};
//# sourceMappingURL=NotificationCenterMainView.js.map