(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();
	}
})();
