const Tabs = (tablist, {selectedTab = 0} = {}) => {
	/**
	 * Array with tabs and corresponding panels for easy access.
	 */
	const items = [];

	/**
	 * Arrow key identifiers.
	 */
	const isLeftKey = (e) => 
		(e.key && e.key === "ArrowLeft") || e.keyCode === 37;
	const isRightKey = (e) => 
		(e.key && e.key === "ArrowRight") || e.keyCode === 39;
	const isDownKey = (e) => 
		(e.key && e.key === "ArrowDown") || e.keyCode === 40;

	/**
	 * Item helper functions.
	 */
	const getCurrentItem = () => items.find(({ panel }) => !panel.hidden);
	const getItemByTab = (target) => items.find(({ tab }) => tab === target);

	/**
	 * Switch to specified item.
	 */
	const switchToItem = (item) => {
		items.forEach(({ tab, panel }) => {
			const match = tab === item.tab;
			tab.setAttribute("aria-selected", match);
			tab.setAttribute("tabindex", match ? "" : "-1");
			panel.hidden = !match;
			if (match) {
				tab.focus();
			}
		});
	};

	/**
	 * Handle tab `keydown` events.
	 */
	const tabKeyDownHandler = (e) => {
		const currentItem = getCurrentItem();
		const index = items.findIndex((item) => item === currentItem);

		// Handle `left` and `right` key events.
		const horizontalOffset = isLeftKey(e) ? -1 : isRightKey(e) ? +1 : 0;

		// Navigate to the left or right if conditions are met.
		if (horizontalOffset !== 0) {
			e.preventDefault();
			const target = items[index + horizontalOffset];
			if (target) {
				switchToItem(target);
			}
		}

		// Handle `down` key event and focus on the current tab.
		if (isDownKey(e)) {
			e.preventDefault();
			getCurrentItem().panel.focus();
		}
	};

	/**
	 * Handle tab `click` events.
	 */
	const tabClickHandler = (e) => {
		e.preventDefault();
		switchToItem(getItemByTab(e.currentTarget));
		toggleMobileSlider(e);
	}

	/**
	 * Toggle 'open' class on parent container
	 */
	const toggleMobileSlider = (e) => {
		const parent = e.target.closest('.tabgroup.js-tablist.vertical')
		if (parent) {
			parent.classList.toggle('open')
		}
	}

	/**
	 * Attach event listeners to handle clicks and arrow key events.
	 */
	const attachEventListeners = () => {
		items.forEach(({tab, panel}) => {
			tab.addEventListener("click", tabClickHandler);
			tab.addEventListener("keydown", tabKeyDownHandler);
		});
	};

	/**
	 * Enhance elements with sementics and initial state.
	 */
	const addElementSemantics = () => {
		// Add `tablist` semantics to list element.
		tablist.setAttribute("role", "tablist");

		// Loop over all items.
		items.forEach(({tab, panel}, index) => {
			// Add `tab` semantics and initial state to anchors.
			tab.setAttribute("role", "tab");
			tab.parentNode.setAttribute("role", "presentation");
			tab.setAttribute("tabindex", index === selectedTab ? "" : "-1");
			tab.setAttribute("aria-selected", index === selectedTab);

			if (panel) {
				if (!tab.getAttribute("id")) {
					tab.setAttribute("id", `${panel.id}-tab`);
				}

			// Add `tabpanel` semantics and initial state to sections.
				panel.setAttribute("role", "tabpanel");
				panel.setAttribute("tabindex", "-1");
				panel.setAttribute(
					"aria-labelledby", 
					tab.getAttribute("id")
				);
				panel.hidden = index !== selectedTab;
			}
		});
	};

	/**
	 * Create an array of tabs with corresponding panels for easy access.
	 */
	const populateItems = () => {
		const tabs = [...tablist.querySelectorAll("a.tab")];
		tabs.forEach((tab, index) => {
			items.push({
				tab,
				panel: document.querySelector(tab.getAttribute("href"))
			});
		});
	};

	return {
		// eslint-disable-next-line consistent-return
		init() {
			// // Return early when no `ul` is passed as enhanceable element.
			// if (!tablist || tablist.tagName.toLowerCase() !== "ul") {
			//    return console.warn(`Unable to enhance tabs. No list element (<ul>) specified.`);
			// }

			populateItems();
			addElementSemantics();
			attachEventListeners();
		}
	};
};
const tabsContainers = document.querySelectorAll(
	".js-tablist .acf-innerblocks-container"
);
if (tabsContainers) {
	tabsContainers.forEach(tabContainer => {
		setTimeout(() => {
			const tabs = Tabs(tabContainer, {
			/* options */
			});
			tabs.init();
		}, 200);
	});
}