(function () {
    'use strict';

    if (!window.voladeMenu || !voladeMenu.plugins || !voladeMenu.plugins.length) {
        return;
    }

    function getCurrentPage() {
        var match = window.location.search.match(/[?&]page=([^&]+)/);
        return match ? match[1] : '';
    }

    function isPluginPage(slug) {
        return voladeMenu.plugins.some(function (p) {
            return slug === 'volade-' + p.slug;
        });
    }

    function isPluginsSection(slug) {
        return slug === voladeMenu.hubSlug
            || slug === voladeMenu.overviewSlug
            || isPluginPage(slug);
    }

    function initFlyout() {
        var submenu = document.querySelector('#adminmenu .toplevel_page_volade .wp-submenu');
        if (!submenu) {
            return;
        }

        var hubLi = null;
        var links = submenu.querySelectorAll('a[href*="page="]');
        for (var i = 0; i < links.length; i++) {
            if (links[i].href.indexOf('page=' + voladeMenu.hubSlug) !== -1) {
                hubLi = links[i].parentElement;
                break;
            }
        }

        if (!hubLi || hubLi.querySelector('.volade-plugins-flyout')) {
            return;
        }

        hubLi.classList.add('volade-plugins-parent');

        var hubLink = hubLi.querySelector('a');
        if (hubLink && !hubLink.querySelector('.volade-flyout-caret')) {
            var caret = document.createElement('span');
            caret.className = 'volade-flyout-caret';
            caret.setAttribute('aria-hidden', 'true');
            caret.textContent = '\u203A';
            hubLink.appendChild(caret);
        }

        var flyout = document.createElement('ul');
        flyout.className = 'volade-plugins-flyout';
        flyout.setAttribute('role', 'menu');

        var currentPage = getCurrentPage();
        var overviewUrl = voladeMenu.overviewUrl || voladeMenu.hubUrl;

        var headerLi = document.createElement('li');
        headerLi.className = 'volade-flyout-header';
        if (currentPage === voladeMenu.hubSlug || currentPage === voladeMenu.overviewSlug) {
            headerLi.classList.add('current');
        }
        var headerA = document.createElement('a');
        headerA.href = overviewUrl;
        headerA.textContent = voladeMenu.hubLabel;
        headerA.setAttribute('role', 'menuitem');
        headerLi.appendChild(headerA);
        flyout.appendChild(headerLi);

        var divider = document.createElement('li');
        divider.className = 'volade-flyout-divider';
        divider.setAttribute('aria-hidden', 'true');
        flyout.appendChild(divider);

        voladeMenu.plugins.forEach(function (plugin) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = plugin.url;
            a.textContent = plugin.title;
            a.setAttribute('role', 'menuitem');
            if (currentPage === 'volade-' + plugin.slug) {
                li.classList.add('current');
            }
            li.appendChild(a);
            flyout.appendChild(li);
        });

        hubLi.appendChild(flyout);

        if (isPluginsSection(currentPage)) {
            hubLi.classList.add('current');
        }

        if (window.matchMedia('(max-width: 782px)').matches && hubLink) {
            hubLink.addEventListener('click', function (e) {
                if (!hubLi.classList.contains('is-open')) {
                    e.preventDefault();
                    hubLi.classList.add('is-open');
                }
            });

            document.addEventListener('click', function (e) {
                if (!hubLi.contains(e.target)) {
                    hubLi.classList.remove('is-open');
                }
            });
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initFlyout);
    } else {
        initFlyout();
    }
})();
