var fades = {};
var fadeId = 1;

function updateFadeOffsets() {
    for (const id in fades) {
        let $e = fades[id].$e;
        if ($e.hasClass('dimmed')) {
            let $dimmer = $e.dimmer('get dimmer');
            let $content = $dimmer.children('.content');
            if ($content.doesntExist()) {
                $content = $dimmer.children('.dialog');
            }
            $content.css('position', 'absolute');
            $content.css('transition', 'top 0.2s linear');

            let scrollCenter = $('.pusher').scrollTop() + (window.innerHeight / 2);
            let scrollBottom = $('.pusher').scrollTop() + window.innerHeight;
            if (Page.Meta.platform == 'desktop') {
                scrollCenter += window.scrollY;
                scrollBottom += window.scrollY;
            }

            let contentOuterHeight = $content.outerHeight();
            if (contentOuterHeight > $dimmer.outerHeight() && $e.hasClass('segment')) {
                $e.attr(
                    'style',
                    'min-height: calc(' + contentOuterHeight.toFixed(0) + 'px + 2em) !important;'
                );
            }
            let offsetTop = $dimmer.getOffsetTopFromRootParent();
            let dimmedTop = offsetTop + contentOuterHeight;
            let dimmedMiddle = offsetTop + ($dimmer.outerHeight() / 2);
            let dimmedBottom = offsetTop + $dimmer.outerHeight();

            let position = 0;

            if ($dimmer.outerHeight() < 250) {
                //position = -dimmedTop + dimmedMiddle + contentOuterHeight;
                position = ($dimmer.outerHeight() / 2) - ($content.outerHeight() / 2);
                if ($content.outerHeight() > $dimmer.outerHeight()) {
                    $content.removeClass('loader elastic content');
                    $content.replaceWith(`<span class="${$content.attr('class')}">${$content.html()}</span>`);
                    $content.attr('style', '');
                }
            } else {
                if (scrollBottom < dimmedBottom) {
                    position = -dimmedTop + Math.max(
                        dimmedTop + contentOuterHeight,
                        Math.min(
                            dimmedTop + contentOuterHeight,
                            scrollBottom
                        )
                    );
                }
                if (scrollCenter >= dimmedTop) {
                    position = -dimmedTop + Math.min(
                        scrollCenter + contentOuterHeight,
                        dimmedBottom
                    );
                } else {
                    position = contentOuterHeight;
                }
            }

            $content.css('top', `${position}px`);
        }
    }
}
setInterval(updateFadeOffsets, 500);
document.addEventListener(
    'touchmove',
    () => updateFadeOffsets(),
    false
);
document.addEventListener(
    'scroll',
    () => updateFadeOffsets(),
    false
);

jQuery.fn.fade = function (action, parameters) {
    if (!parameters) {
        parameters = {};
    }
    let defaultParameters = {
        text: '',
        dialog: false,
        index: null,
        hideLoader: false,
        textOnly: false,
        opacity: 0.8
    };
    let dimmerDefaults = Page.dimmerDefaults || {
        closable: false,
        loaderVariation: 'blue elastic',
        dimmerName: 'managed'
    };
    let options = {
        queue: {},
        timeouts: {},
        index: 0
    };

    function getLastInQueue(options) {
        let keys = [];
        for (let k in options.queue) {
            if (options.queue.hasOwnProperty(k)) {
                keys.push(parseInt(k));
            }
        }
        if (!keys.length) {
            return {};
        }
        keys.sort();
        return options.queue[keys.slice(-1)[0]];
    }

    function update (parameters, $e) {
        parameters = $.extend(true, dimmerDefaults, parameters);
        $e
            .dimmer('preinitialize')
            .dimmer(parameters)
            .dimmer('show');
        let $dimmer = $e.dimmer('get dimmer');
        if (parameters.dialog) {
            $dimmer.html(`
                <div class="content dialog">
                    <div class="center">
                        <h3 class="ui header" style="font-weight: normal;">
                            <div class="content">
                                <div class="sub header">${parameters.text || ''}</div>
                            </div>
                        </h3>
                        <div class="ui primary button okay">Okay</div>
                    </div>
                </div>`);
            $dimmer.find('.popup').popup();
            $dimmer.find('.okay.button').rebind('click', function () {
                if ($.isFunction(parameters.onClose)) {
                    parameters.onClose($dimmer, $(this));
                }
                $e.fade('hide all');
            });
        } else {
            if (parameters.textOnly) {
                $dimmer.html(`
                    <div class="content">
                        <div class="center">
                            ${parameters.text || ''}
                        </div>
                    </div>`);
            } else if (!parameters.hideLoader) {
                $dimmer.html(`
                    <div class="ui ${dimmerDefaults.loaderVariation} text loader content" data-index="${parameters.index}">
                        ${parameters.text || ''}
                    </div>`);
                // let me = this;
                // $dimmer.find('.loader').rebind('click', function () {
                //     if (Page.keys.control) {
                //         me.close($(this).data('index'));
                //     }
                // });
            }
            updateFadeOffsets();
        }
    }

    let $e = $(this);

    if (!$e.data('fade-id')) {
        fades[fadeId] = {
            queue: {},
            timeouts: {},
            index: 0,
            $e: $e
        };
        $e.attr('data-fade-id', fadeId);
        fadeId++;
    }

    let data = fades[$e.data('fade-id')];
    if (!data) {
        return;
    }

    switch (action) {
        case 'show':
            if (typeof parameters === 'string') {
                parameters = {
                    text: parameters
                };
            }

            parameters = $.extend(defaultParameters, parameters);
            data.index++;
            parameters.index = data.index;
            $e.find(':focus').blur();
            data.queue[data.index] = parameters;
            update(parameters, $e);

            return parameters.index;
        case 'hide':
            let index = parameters;
            if (!(index in data.queue)) {
                return;
            }
            delete data.queue[index];
            if (Object.keys(data.queue).length == 0) {
                $e.addClass('dimmed');
                $e.dimmer('hide');
            } else {
                update(
                    getLastInQueue(options),
                    $e
                );
            }
            break;
        case 'hide all':
            $e.dimmer('hide');
            data.queue = {};
            break;
        case 'dialog':
            if (typeof parameters === 'string') {
                parameters = $.extend(
                    defaultParameters,
                    {
                        text: parameters
                    }
                );
            }
            data.index++;
            parameters.index = data.index;
            parameters.dialog = true;
            data.queue[data.index] = parameters;
            update(parameters, $e);

            return parameters.index;
    }
};