/**
 * Handles the tabs functionality, given the html requirements are met
 */
class TabsContainer{
	constructor() {
		this.a11y = window.jvbA11y;
		this.error = window.jvbError;

		this.subscribers = new Set();
		this.tabs = new Map();

		this.hasHash = false;
		this.init();
	}
	init() {
		this.initElements();
		this.initListeners();
	}

	initElements() {
		this.selectors = {
			nav: '.tabs',
			tab: '[data-tab]',
			active: 'button.tab.active',
			section: '.tab-content',
			button: 'button.tab',
			select: 'select.tab-list',
		};
	}
	initListeners() {
		this.clickHandler = this.handleClick.bind(this);
		this.changeHandler = this.handleChange.bind(this);
	}
		handleClick(e) {
			let config = this.getConfig(e.target);
			if (!config) return;

			const tab = e.target.closest(this.selectors.tab);
			if (tab) {
				this.switchTab(tab.dataset.tab, config);
			}
		}

		handleChange(e) {
			let config = this.getConfig(e.target);
			if (!config) return;
			if (!config) return;
			this.switchTab(e.target.value, config);
		}

	/**
	 *
	 * @param {HTMLElement} container
	 * @param {object} options
	 */
	registerTab(container, options = {}) {
		if (!container) return false;

		let	ui = window.uiFromSelectors(this.selectors, container);
		if (!ui.nav || !ui.section) {
			console.error('No tab navigation or section found');
			return false;
		}
		let tabsId = window.generateID('tab');

		container.dataset.tabsId = tabsId;
		ui.buttons = Array.from(container.querySelectorAll(this.selectors.button));
		ui.sections = Array.from(container.querySelectorAll(this.selectors.section));
		ui.sections.forEach(section => {
			if (section.querySelector('.tabs')) {
				options.hasChildren = true;
				this.registerTab(section, {parent: tabsId});
			}
		});

		if (ui.select) {
			ui.options = Array.from(ui.select.querySelectorAll('option'));
		}

		let config = {
			id: tabsId,
			ui: ui,
			updateURL: options.updateURL ?? true
		};

		//Add listeners
		ui.nav.addEventListener('click', this.clickHandler);
		ui.select?.addEventListener('change', this.changeHandler);
		this.tabs.set(tabsId, config);
		this.determineActiveTab(config);

		return config;
	}

	determineActiveTab(config) {
		if (this.getInitialTabFromHash()) {
			let updated = this.tabs.get(config.id);
			if (updated.activeTab && config.activeTab && updated.activeTab === config.activeTab) return;
		}
		let tab = config.ui.buttons[0].dataset.tab??false;
		if (tab) {
			this.switchTab(tab, config);
		}
	}
	getInitialTabFromHash() {
		if (this.hasHash || !window.location.search) return false;
		const params = new URLSearchParams(window.location.search);
		const hash = params.get('tab');
		if (!hash) return false;

		const parts = hash.split('|');

		parts.forEach(part => {
			// Find the config that has a button matching this part
			const conf = Array.from(this.tabs.values()).find(tab =>
				tab.ui.buttons.some(btn => btn.dataset.tab === part)
			);

			if (conf) {
				this.switchTab(part, conf);
			}
		});

		this.hasHash = true;
		return true;
	}

	/**
	 *
	 * @param {HTMLElement} container
	 */
	removeTab(container) {
		if (!container || !container.dataset.tabsId) return;
		let config = this.tabs.get(container.dataset.tabsId);
		if (!config) return;
		config.ui.nav.removeEventListener('click', this.clickHandler);
		config.ui.select?.removeEventListener('change', this.changeHandler);
		this.tabs.delete(container.dataset.tabsId);
	}

	/**
	 *
	 * @param {string} tab
	 * @param {string|Object} config Either the key of the tabs instance, or a tab config object
	 */
	switchTab(tab, config) {
		config = (typeof config === 'string') ? this.tabs.get(config) : config;
		if (!config) return;
		let activeTab = config.ui.sections.filter(section => section.classList.contains('active'));

		if (Object.hasOwn(config, 'preCheck') && !config.preCheck(activeTab[0], config)) return;
		if (document.activeElement && this.isInTabs(document.activeElement, config)) document.activeElement.blur();

		config.ui.buttons.forEach((btn, index) => {
			btn.classList.remove('active', 'previous', 'next');
			let isActive = btn.dataset.tab === tab;
			btn.setAttribute('aria-selected', isActive);
			if (isActive) {
				btn.classList.add('active');
				let prv = Math.max(index - 1, 0);
				let next = Math.min(index+1, config.ui.buttons.length -1);
				if (prv !== index) {
					config.ui.buttons[prv]?.classList.add('previous');
				}
				if (next !== index) {
					config.ui.buttons[next]?.classList.add('next');
				}
			}
		});

		config.ui.sections.forEach((section, index) => {
			let isActive = section.dataset.tab === tab;
			section.classList.toggle('active', isActive);
			section.setAttribute('aria-hidden', !isActive);
			section.hidden = !isActive;
		});

		this.notify('tab-switched', {
			previous: config.activeTab,
			current: tab,
			config: config
		});
		config.activeTab = tab;

		this.tabs.set(config.id, config);
		if (config?.hasChildren) this.updateChildTabs(config.id);
		if (config?.updateURL) this.updateURL(config);
		if (config.ui.select) this.maybeUpdateSelect(tab, config);

		this.a11y.announce(`Switched to ${tab} tab`);
	}
	updateChildTabs(id) {
		Array.from(this.tabs.values()).filter(conf => conf.parent === id).forEach(inst => {
			let firstBtn = inst.ui.buttons[0].dataset.tab??false;
			if (firstBtn) {
				this.switchTab(firstBtn, inst);
			}
		});
	}

	updateURL(config) {
		if (!config.updateURL) return;
		let hash = this.checkAncestorsHash(config);
		if (hash) {
			window.history.pushState({tab:config.activeTab},'',`?tab=${hash}`);
		}
	}
	checkAncestorsHash(conf) {
		const parts = [];
		let current = conf;

		while (current) {
			parts.unshift(current.activeTab);
			current = current.parent ? this.tabs.get(current.parent) : null;
		}

		return parts.join('|');
	}
	maybeUpdateSelect(tab, config) {
		if (!config.ui.select || !Object.hasOwn(config, 'options')) return;
		config.options.forEach(option => {
			if (option.value === tab) {
				config.ui.select.value = tab;
				return;
			}
		});

	}


	/**
	 * Event system
	 */
	subscribe(callback) {
		this.subscribers.add(callback);
		return () => this.subscribers.delete(callback);
	}

	notify(event, data) {
		this.subscribers.forEach(cb => cb(event, data));
	}

	/**************************************************************
	 UTILITY
	**************************************************************/
	/**
	 *
	 * @param {HTMLElement} target
	 * @returns {object|boolean}
	 */
	getConfig(target) {
		const instance = target.closest('[data-tabs-id]');
		if (!instance) return false;
		const config = this.tabs.get(instance.dataset.tabsId);
		if (!config) return false;
		return config;
	}
	isInTabs(target, config) {
		return config.ui.sections.some(section => section.contains(target));
	}
	/**************************************************************
	 CLEANUP
	**************************************************************/
	destroy() {
		this.subscribers.clear();

		Array.from(this.tabs.values()).forEach(tab => {
			tab.ui.nav.removeEventListener('click', this.clickHandler);
			tab.ui.select?.removeEventListener('change', this.changeHandler);
		});
	}
}

document.addEventListener('DOMContentLoaded', function() {
	window.jvbTabs = new TabsContainer();
});