/* global window, document */
(function (window, document) {
	'use strict';

	const app = window.MailDoctorAdminApp;

	if (!app) {
		return;
	}

	function mapTransportClass(selected) {
		switch (selected) {
			case 'mailgun_api':
				return 'mail-doctor-transport-mailgun';
			case 'sendgrid_api':
				return 'mail-doctor-transport-sendgrid';
			case 'postmark_api':
				return 'mail-doctor-transport-postmark';
			case 'sparkpost_api':
				return 'mail-doctor-transport-sparkpost';
			case 'ses_api':
				return 'mail-doctor-transport-ses';
			case 'generic_http':
				return 'mail-doctor-transport-generic';
			default:
				return selected ? `mail-doctor-transport-${selected}` : '';
		}
	}

	function updateTransportVisibility(selected) {
		const rows = document.querySelectorAll('.mail-doctor-transport-row');
		if (!rows.length) {
			return;
		}

		const targetClass = mapTransportClass(selected);
		rows.forEach((row) => {
			const match = targetClass && row.classList.contains(targetClass);
			row.hidden = !match;
			row.setAttribute('aria-hidden', match ? 'false' : 'true');
		});
	}

	function initTransportSwitching() {
		const select = document.getElementById('mail-doctor-transport');
		if (!select) {
			return;
		}

		const apply = () => updateTransportVisibility(select.value || '');
		select.addEventListener('change', apply);
		apply();
	}

		function activateIntegration(target, container) {
			if (!target || !container) {
				return;
			}

			const tabs = Array.prototype.slice.call(container.querySelectorAll('[data-mail-doctor-integrations-target]'));
			const panes = Array.prototype.slice.call(container.querySelectorAll('.mail-doctor-integrations__pane'));

			tabs.forEach((tab) => {
				const isActive = tab.getAttribute('data-mail-doctor-integrations-target') === target;
				tab.classList.toggle('is-active', isActive);
				tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
			});

			panes.forEach((pane) => {
				const paneId = `mail-doctor-integrations-pane-${target}`;
				const isActive = pane.id === paneId;
				pane.classList.toggle('is-active', isActive);
				pane.hidden = !isActive;
				pane.setAttribute('aria-hidden', isActive ? 'false' : 'true');
				pane.classList.toggle('is-active', isActive);
			});
		}

	function initIntegrationsTabs() {
		const container = document.querySelector('[data-mail-doctor-integrations]');
		if (!container) {
			return;
		}

		const tabs = Array.prototype.slice.call(container.querySelectorAll('[data-mail-doctor-integrations-target]'));
		const initial = tabs.length ? tabs[0].getAttribute('data-mail-doctor-integrations-target') : '';

		container.addEventListener('click', (event) => {
			const tab = event.target.closest('[data-mail-doctor-integrations-target]');
			if (!tab || !container.contains(tab)) {
				return;
			}

			event.preventDefault();
			activateIntegration(tab.getAttribute('data-mail-doctor-integrations-target'), container);
		});

		activateIntegration(initial, container);
	}

	function initWooOverrides() {
		const table = document.querySelector('[data-mail-doctor-woo-table]');
		if (!table) {
			return;
		}

		const checkboxes = Array.prototype.slice.call(table.querySelectorAll('input[type="checkbox"][data-mail-doctor-woo-toggle]'));
		if (!checkboxes.length) {
			return;
		}

		function setAll(state) {
			checkboxes.forEach((box) => {
				box.checked = state;
			});
		}

		table.addEventListener('click', (event) => {
			const action = event.target && event.target.getAttribute('data-mail-doctor-woo-action');
			if (!action) {
				return;
			}

			event.preventDefault();
			const confirmEnable = table.getAttribute('data-confirm-enable');
			const confirmDisable = table.getAttribute('data-confirm-disable');
			const confirmMatch = table.getAttribute('data-confirm-match');

			if (action === 'enable') {
				if (confirmEnable && !window.confirm(confirmEnable)) {
					return;
				}
				setAll(true);
				return;
			}

			if (action === 'disable') {
				if (confirmDisable && !window.confirm(confirmDisable)) {
					return;
				}
				setAll(false);
				return;
			}

			if (action === 'match') {
				if (confirmMatch && !window.confirm(confirmMatch)) {
					return;
				}
				checkboxes.forEach((box) => {
					const defaultState = box.getAttribute('data-mail-doctor-woo-default');
					box.checked = defaultState === '1';
				});
			}
		});
	}

	function initTabLayouts() {
		const menus = Array.prototype.slice.call(document.querySelectorAll('[data-mail-doctor-tab-menu]'));
		if (!menus.length) {
			return;
		}

		menus.forEach((menu) => {
			menu.addEventListener('click', (event) => {
				const trigger = event.target.closest('[data-mail-doctor-tab-target]');
				if (!trigger || !menu.contains(trigger)) {
					return;
				}

				event.preventDefault();

				const target = trigger.getAttribute('data-mail-doctor-tab-target');
				const container = menu.closest('.mail-doctor-tab-layout');
				if (!container || !target) {
					return;
				}

				const tabs = Array.prototype.slice.call(menu.querySelectorAll('[data-mail-doctor-tab-target]'));
				const panels = Array.prototype.slice.call(container.querySelectorAll('[data-mail-doctor-tab-panel]'));

				tabs.forEach((tab) => {
					const active = tab.getAttribute('data-mail-doctor-tab-target') === target;
					tab.classList.toggle('is-active', active);
					tab.setAttribute('aria-selected', active ? 'true' : 'false');
				});

				panels.forEach((panel) => {
					const active = panel.getAttribute('data-mail-doctor-tab-panel') === target;
					panel.hidden = !active;
					panel.setAttribute('aria-hidden', active ? 'false' : 'true');
					panel.classList.toggle('is-active', active);
				});
			});
		});
	}

	function initSettingsNavToggle() {
		const toggle = document.querySelector('.mail-doctor-settings-nav__toggle');
		const list = document.getElementById('mail-doctor-settings-nav-list');

		if (!toggle || !list) {
			return;
		}

		const sync = (expanded) => {
			list.hidden = !expanded;
			toggle.setAttribute('aria-expanded', expanded ? 'true' : 'false');
		};

		toggle.addEventListener('click', () => {
			const expanded = toggle.getAttribute('aria-expanded') === 'true';
			sync(!expanded);
		});

		sync(toggle.getAttribute('aria-expanded') === 'true');
	}

	app.register(() => {
		initTransportSwitching();
		initIntegrationsTabs();
		initTabLayouts();
		initSettingsNavToggle();
		initWooOverrides();
	});
})(window, document);
