/* global bindMagnificPopup: true */
$(document).ready(function () {


    $('.shop-pagination').hide();

    const oWindow = $(window);
    const oOffsetField = $('#fld_products_offset');
    const oViewField = $('#fld_view');
    const oShowingCountField = $('#showing_count');

    let loadBatchSize = 6;
    let initialItemsOnPage = $('#' + oViewField.val() + '-product-container .product-item').length;
    oShowingCountField.html(initialItemsOnPage);
    let bottomOffset = initialItemsOnPage;
    let topOffset = 0;

    function logConsole(message) {
        console.log(message);
    }

    class Loader {
        constructor() {
            logConsole("Init Loader");
            this.isLoading = false;
        }

        getProducts(iOffset, iLimit, view, force) {

            const loader = this;
            return new Promise((resolve, reject) => {
                if (loader.isLoading && !(force === true)) {
                    reject("Already loading data");
                }

                loader.isLoading = true;
                $.ajax(window.href, {
                    type: 'GET', data: {
                        _do: 'GetProductSet', offset: iOffset, limit: iLimit, view: view
                    }, success: function (data) {
                        resolve(data.html);
                    }, error: function (e) {
                        loader.isLoading = false;
                        logConsole("Error");
                        reject(e);
                    }
                });
            })
        }
    }

    class ViewPort {
        constructor(loader) {
            // logConsole("Init viewport");
            this.loader = loader;
            this.view = oViewField.val();
            this.container = $('#' + this.view + '-product-container');

            this.closeToTopPosition = oWindow.height() * 2;
            this.closeToBottomPostion = $(document).height() - (oWindow.height() + 300);

            this.currentPosition = oWindow.scrollTop() + oWindow.height();
        }

        closeToTop() {
            /*
            const viewPort = this;
            logConsole("Current position: ", viewPort.currentPosition + " < close to top postion: " + viewPort.closeToTopPosition, viewPort.currentPosition < viewPort.closeToTopPosition);
            logConsole("Window height:" + oWindow.height())
            return new Promise((resolve, reject) => {
                if(viewPort.currentPosition <= viewPort.closeToTopPosition)
                {
                    resolve("close to top " + viewPort.currentPosition);
                }
                return false;
            });
             */
        }

        closeToBottom() {
            const viewPort = this;
            // logConsole("Current position: ", viewPort.currentPosition + " > close to bottom position: " + viewPort.closeToBottomPostion, viewPort.currentPosition > viewPort.closeToBottomPostion);
            return new Promise((resolve, reject) => {

                if (this.currentPosition > this.closeToBottomPostion) {
                    resolve("close to bottom " + this.currentPosition);
                }
                return false;
            });
        }

        addItemsToTop() {

            const newTopOffset = topOffset - loadBatchSize;
            logConsole(topOffset);

            const viewPort = this;
            return new Promise((resolve, reject) => {
                if (newTopOffset < 0) {
                    topOffset = 0;
                    reject("not loading top offset is " + topOffset);
                    return;
                }
                topOffset = newTopOffset;
                let batchSize = loadBatchSize;
                let forceLoad = false;
                if (oWindow.scrollTop() < 10) {
                    // We have reached the top but did not revert all the products yet.
                    // Simply load all,
                    batchSize = topOffset + 3;
                    topOffset = 0;
                    forceLoad = true;
                }


                viewPort.loader.getProducts(topOffset, batchSize, viewPort.view, forceLoad)
                    .then(function (html) {
                        logConsole("Add items to top");
                        viewPort.container.prepend(html);
                        // Store dataset in local history
                        $(window).trigger('state:change');
                        viewPort.loader.isLoading = false;
                        resolve(html);
                    }).catch((e) => {
                    // console.error(e);
                });
            });
        }

        removeItemsFromTop() {
            const viewPort = this;
            logConsole("removeItemsFromTop");
            return new Promise((resolve) => {
                topOffset = parseInt(topOffset) + loadBatchSize;
                const productList = $('.product-item', viewPort.container)
                logConsole(productList);
                for (let i = 0; i < loadBatchSize; i++) {
                    logConsole("Remove item " + i + " / " + loadBatchSize + " from top");
                    let item = [].shift.call(productList);
                    logConsole(item);
                    item.remove();

                }
                resolve();
            });
        }

        addItemsToBottom() {
            const viewPort = this;

            return new Promise((resolve) => {
                bottomOffset = parseInt(bottomOffset);
                const productList = $(".product-item", viewPort.container);

                viewPort.loader.getProducts(bottomOffset, loadBatchSize, viewPort.view)
                    .then(function (html) {
                        bottomOffset = parseInt(bottomOffset) + loadBatchSize;
                        logConsole("Add items to bottom " + productList.length + " " + loadBatchSize);
                        oShowingCountField.html(productList.length + loadBatchSize);
                        viewPort.container.append(html);
                        // Store dataset in local history
                        $(window).trigger('state:change');
                        viewPort.loader.isLoading = false;
                        resolve(html);
                    })
                    .catch((e) => {
                        // console.error(e);
                    })
            });
        }

        removeItemsFromBottom() {
            const viewPort = this;
            logConsole("removeItemsFromBottom");
            return new Promise((resolve) => {
                bottomOffset = parseInt(bottomOffset) - loadBatchSize;
                const productList = $(".product-item", viewPort.container);

                let removeBatchSize = loadBatchSize;
                if (oWindow.scrollTop() < 10) {
                    removeBatchSize = productList.length - initialItemsOnPage;
                }

                for (let i = 0; i < removeBatchSize; i++) {
                    logConsole("Remove item " + i + "from bottom");
                    let currentLastElement = [].pop.call(productList);
                    currentLastElement.remove();
                }
                resolve();
            });
        }
    }

    const loader = new Loader();


    oWindow.on('scroll', function () {
        const view = oViewField.val();

        const viewPort = new ViewPort(loader, view)

        function closeToTop() {
            viewPort.closeToTop()
                .then(() => {
                    return viewPort.addItemsToTop()
                })
                .then(() => {
                    return viewPort.removeItemsFromBottom()
                })
                .then(() => {
                    return bindMagnificPopup()
                })
                .catch((e) => {
                    logConsole(e);
                });

        }

        // closeToTop();
        viewPort.closeToBottom()
            .then(() => {
                return viewPort.addItemsToBottom()
            })
            /* .then(() => { return viewPort.removeItemsFromTop()}) */
            .then(() => {
                return bindMagnificPopup
            })
            .catch((e) => {
                logConsole(e);
            });

        /*
        if(viewPort.currentPosition === viewPort.closeToTopPosition)
        {
            let topLoadInterval = setInterval(function (){

                if(topOffset === 0)
                {
                    clearInterval(topLoadInterval);
                    return false;
                }
                closeToTop();

            }, 100);

        }

         */

    });
})