(function() {
    var sideMenuContainer = $('<div id="side-menu-container">')
    var sideMenuOpener = $('<button class="side-menu-opener"></button>')
    var sideMenu = $('<div id="side-menu">')
    var body = $('body')
    var isTouchDevice = window.matchMedia("(pointer: coarse)").matches

    <?php if ($_['force-light-icon']): ?>
        sideMenuContainer.attr('data-forcelighticon', '1')
    <?php endif; ?>

    body.on('side-menu.apps', function(e, apps) {
        <?php if ($_['hide-when-no-apps']): ?>
            sideMenu = $('#side-menu')

            if (apps.length === 0) {
                sideMenu.removeClass('open')
                sideMenuOpener.addClass('hide')
            } else {
                sideMenuOpener.removeClass('hide')
            }
        <?php endif; ?>
    })

    body.on('side-menu.ready', function() {
        sideMenu = $('#side-menu')

        var headerMenuOpener = $('#header .side-menu-opener')
        var sideMenuOpener = $('#side-menu .side-menu-opener')

        <?php if ($_['opener-hover']): ?>
            var sideMenuMouseLeave = function() {
                sideMenu
                    .removeClass('open')
                    .off('mouseleave', sideMenuMouseLeave)
            }

            var sideMenuMouseEnter = function() {
                sideMenu.on('mouseleave', sideMenuMouseLeave)
            }

            var sideMenuOpenerMouseEnter = function() {
                sideMenu
                    .addClass('open')
                    .on('mouseenter', sideMenuMouseEnter)
            }

            if (!isTouchDevice) {
                headerMenuOpener.on('mouseenter', sideMenuOpenerMouseEnter)

                sideMenu.addClass('hide-opener')
            }
        <?php endif; ?>

        headerMenuOpener.on('click', function() {
            sideMenu.addClass('open');
        })

        sideMenuOpener.on('click', function() {
            sideMenu.removeClass('open');
        })
    })

    body.append(sideMenuContainer)
    sideMenuContainer.append(sideMenu)

    <?php if ($_['opener-position'] === 'before'): ?>
        sideMenuOpener.insertBefore('#nextcloud')
    <?php else: ?>
        sideMenuOpener.insertAfter('#nextcloud')
    <?php endif; ?>

    <?php if ($_['external-sites-in-top-menu']): ?>
        sideMenuContainer.attr('data-externalsitesintopmenu', '1')

        var menuCache = null

        var updateTopMenu = function() {
            var breakpointMobileWidth = 1024
            var menu = $('#appmenu')
            var apps = menu.find('li')
            var minAppsDesktop = 8
            var usePercentualAppMenuLimit = 0.9
            var isMobile = $(window).width() < breakpointMobileWidth
            var lastShownApp = null
            var appShown = []
            var moreApps = $('#more-apps')
            var navigation = $('#navigation')
            var navigationApps = $('#apps ul')
            var appCount = null

            var currentMenuCache = menu.html() + menu.next().html()

            if (currentMenuCache === menuCache) {
                return
            }

            navigationApps.html('')

            apps.each(function(i, app) {
                var dataId = app.getAttribute('data-id')

                if (dataId === null) {
                    return
                }

                if (dataId.indexOf('external_index') === -1) {
                    app.classList.add('hidden')
                    app.classList.add('app-hidden')
                } else {
                    app.classList.remove('hidden')
                    app.classList.add('app-external-site')
                    appShown.push(app)
                    navigationApps.append(app.outerHTML)
                }
            })

            var rightHeaderWidth = $('.header-right').outerWidth()
            var headerWidth = $('header').outerWidth()
            var availableWidth = headerWidth - $('#nextcloud').outerWidth() - $('#header .side-menu-opener').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210)

            if (!isMobile) {
                availableWidth = availableWidth * usePercentualAppMenuLimit
            }

            if (isMobile && appCount > minAppsDesktop) {
                appCount = minAppsDesktop
            } else if (!isMobile && appCount < minAppsDesktop) {
                appCount = minAppsDesktop
            } else {
                appCount = Math.floor(availableWidth / $('#appmenu li').width())
            }

            if (appCount === 0) {
                menu.addClass('hidden')
            }

            menu.removeClass('hidden')
            menu.css('opacity', 1)

            if (appShown.length - 1 - appCount >= 1) {
                appCount--
            }

            moreApps.find('a').removeClass('active')

            var k = 0
            var notInHeader = 0
            var name

            $(appShown).each(function(i, app) {
                app = $(app)
                name = app.data('id')

                if (k < appCount && appCount > 0) {
                    app.removeClass('hidden')
                    lastShownApp = app

                    $('#apps li[data-id=' + name + '].app-external-site').addClass('in-header')
                } else {
                    app.addClass('hidden')
                    notInHeader++

                    $('#apps li[data-id=' + name + '].app-external-site').removeClass('in-header')

                    if (appCount > 0 && app.children('a').hasClass('active')) {
                        lastShownApp.addClass('hidden')
                        app.removeClass('hidden')
                        notInHeader++

                        $('#apps li[data-id=' + name + '].app-external-site')
                            .removeClass('in-header')
                            .addClass('in-header')
                    }
                }

                k++
            })

            if (notInHeader === 0) {
                moreApps.hide()
                navigation.hide()
            } else {
                moreApps.show()
            }

            menuCache = menu.html() + menu.next().html()
        }

        setInterval(updateTopMenu, 50)
    <?php endif; ?>
})();