(function () {
	'use strict';

	var SECTION_TO_TAB = {
		'user-panel-avisos': 'avisos',
		'user-panel-checklist': 'chequeo',
		'user-panel-agenda': 'agenda',
		'user-panel-compras': 'compras',
		'user-panel-proveedores': 'compras',
		'user-panel-informe-tiempos': 'informe'
	};

	var LEGACY_TAB_MAP = {
		hoy: 'avisos'
	};

	function getTabsRoot(scope) {
		return (scope && scope.querySelector
			? scope.querySelector('[data-user-panel-tabs]')
			: null) || document.querySelector('[data-user-panel-tabs]');
	}

	function activateTab(tabId, options) {
		var root = getTabsRoot();
		var tabs;
		var panels;
		var activeBtn = null;
		var opts = options || {};

		if (!root || !tabId) {
			return false;
		}

		tabs = root.querySelectorAll('[data-user-panel-tab]');
		panels = root.querySelectorAll('[data-user-panel-tab-panel]');

		tabs.forEach(function (tab) {
			var isActive = tab.getAttribute('data-user-panel-tab') === tabId;
			tab.classList.toggle('is-active', isActive);
			tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
			tab.setAttribute('tabindex', isActive ? '0' : '-1');
			if (isActive) {
				activeBtn = tab;
			}
		});

		panels.forEach(function (panel) {
			var isActive = panel.getAttribute('data-user-panel-tab-panel') === tabId;
			panel.classList.toggle('is-active', isActive);
			if (isActive) {
				panel.removeAttribute('hidden');
			} else {
				panel.setAttribute('hidden', '');
			}
		});

		if (!activeBtn) {
			return false;
		}

		if (opts.updateHash !== false && window.history && window.history.replaceState) {
			window.history.replaceState(null, '', '#user-panel-tab-' + tabId);
		}

		return true;
	}

	function activateForSectionId(sectionId, options) {
		var tabId = SECTION_TO_TAB[sectionId] || '';
		if (!tabId) {
			return false;
		}
		return activateTab(tabId, options);
	}

	function activateForHash(hash, options) {
		var clean = String(hash || '').replace(/^#/, '');
		var tabId;
		var opts = options || {};

		if (!clean) {
			return false;
		}

		if (clean.indexOf('user-panel-tab-') === 0) {
			tabId = clean.replace('user-panel-tab-', '');
			if (LEGACY_TAB_MAP[tabId]) {
				tabId = LEGACY_TAB_MAP[tabId];
			}
			return activateTab(tabId, opts);
		}

		if (SECTION_TO_TAB[clean]) {
			activateForSectionId(clean, opts);
			if (opts.scroll !== false) {
				window.setTimeout(function () {
					var target = document.getElementById(clean);
					if (target) {
						target.scrollIntoView({ behavior: 'smooth', block: 'start' });
					}
				}, 40);
			}
			return true;
		}

		return false;
	}

	function initTabs(root) {
		var tabs;

		if (!root || root.dataset.userPanelTabsBound === '1') {
			return;
		}

		root.dataset.userPanelTabsBound = '1';
		tabs = root.querySelectorAll('[data-user-panel-tab]');

		tabs.forEach(function (tab) {
			tab.setAttribute('tabindex', tab.classList.contains('is-active') ? '0' : '-1');

			tab.addEventListener('click', function () {
				activateTab(tab.getAttribute('data-user-panel-tab'), { updateHash: true });
			});

			tab.addEventListener('keydown', function (event) {
				var keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
				var list;
				var index;
				var next;

				if (keys.indexOf(event.key) === -1) {
					return;
				}

				event.preventDefault();
				list = Array.prototype.slice.call(tabs);
				index = list.indexOf(tab);

				if (event.key === 'Home') {
					next = list[0];
				} else if (event.key === 'End') {
					next = list[list.length - 1];
				} else if (event.key === 'ArrowRight') {
					next = list[(index + 1) % list.length];
				} else {
					next = list[(index - 1 + list.length) % list.length];
				}

				if (next) {
					activateTab(next.getAttribute('data-user-panel-tab'), { updateHash: true });
					next.focus();
				}
			});
		});
	}

	function initAll() {
		var roots = document.querySelectorAll('[data-user-panel-tabs]');
		var hash = window.location.hash ? window.location.hash.slice(1) : '';

		roots.forEach(initTabs);

		if (hash) {
			activateForHash(hash, { updateHash: false, scroll: true });
		}
	}

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

	window.LogisticaUserPanelNav = {
		init: initAll,
		activateTab: activateTab,
		activateForSectionId: activateForSectionId,
		activateForHash: activateForHash
	};
})();
