import ClientController from '../client-controller';
import { Channel } from '../data-types';
import IState from './require/elements-state.js';

import { $, $$, $$$, $$$$ } from './require/q-module';

export default function bindInfiniteScrollEvents(state: IState): void {
    const { document, ui, actions } = state;
    $.setDocument(document);

    // Update current channel messages as the pane is scrolled
    let loadingBefore = false;
    let loadingAfter = false;
    async function updateInfiniteScroll() {
        let scrollTop = $('#channel-feed-content-wrapper').scrollTop;
        let scrollHeight = $('#channel-feed-content-wrapper').scrollHeight;
        let clientHeight = $('#channel-feed-content-wrapper').clientHeight;

        if (!ui.hasActiveServer()) return;
        if (!ui.hasActiveChannel()) return;

        if (!loadingBefore && !ui.messagesAtTop && scrollTop < 600) { // Approaching the unloaded top of the page
            // Fetch more messages to add above
            loadingBefore = true;
            await actions.fetchAndUpdateMessagesBefore(ui.activeServer as ClientController, ui.activeChannel as Channel);
            loadingBefore = false;
        } else if (!loadingAfter && !ui.messagesAtBottom && scrollHeight - clientHeight - scrollTop < 600) { // Approaching the unloaded bottom of the page
            // Fetch more messages to add below
            loadingAfter = true;
            await actions.fetchAndUpdateMessagesAfter(ui.activeServer as ClientController, ui.activeChannel as Channel);
            loadingAfter = false;
        }
    }

    $('#channel-feed-content-wrapper').addEventListener('scroll', updateInfiniteScroll);

    ($('#channel-feed-content-wrapper') as any).updateInfiniteScroll = updateInfiniteScroll; // custom element function
}