/**
 * Elementor frontend handler — Product Tabs widget.
 *
 * Handles tab switching (horizontal / vertical) and accordion toggling. Markup
 * works without JS too (the active panel is server-rendered); this layer just
 * adds interactivity.
 *
 * @package captain-widgets-kit
 * @since   1.4.0
 */
( function ( $, window, document ) {
	'use strict';

	/**
	 * Wire a tabs (horizontal/vertical) instance.
	 *
	 * @param {HTMLElement} root Widget wrapper.
	 */
	function setupTabs( root ) {
		var tabs   = root.querySelectorAll( '.captwiki-ptabs__tab' );
		var panels = root.querySelectorAll( '.captwiki-ptabs__panel' );

		if ( ! tabs.length || ! panels.length ) {
			return;
		}

		tabs.forEach( function ( tab, index ) {
			tab.addEventListener( 'click', function () {
				tabs.forEach( function ( t ) {
					t.classList.remove( 'is-active' );
					t.setAttribute( 'aria-selected', 'false' );
				} );
				panels.forEach( function ( p ) {
					p.classList.remove( 'is-active' );
					p.setAttribute( 'hidden', 'hidden' );
				} );

				tab.classList.add( 'is-active' );
				tab.setAttribute( 'aria-selected', 'true' );

				if ( panels[ index ] ) {
					panels[ index ].classList.add( 'is-active' );
					panels[ index ].removeAttribute( 'hidden' );
				}
			} );
		} );
	}

	/**
	 * Wire an accordion instance.
	 *
	 * @param {HTMLElement} root Widget wrapper.
	 */
	function setupAccordion( root ) {
		var headers = root.querySelectorAll( '.captwiki-ptabs__acc-header' );

		if ( ! headers.length ) {
			return;
		}

		headers.forEach( function ( header ) {
			header.addEventListener( 'click', function () {
				var item     = header.closest( '.captwiki-ptabs__item' );
				var panel    = document.getElementById( header.getAttribute( 'aria-controls' ) );
				var isActive = header.classList.contains( 'is-active' );

				header.classList.toggle( 'is-active', ! isActive );
				header.setAttribute( 'aria-expanded', isActive ? 'false' : 'true' );

				if ( item ) {
					item.classList.toggle( 'is-active', ! isActive );
				}

				if ( panel ) {
					panel.classList.toggle( 'is-active', ! isActive );
				}
			} );
		} );
	}

	/**
	 * Per-instance dispatcher.
	 *
	 * @param {HTMLElement} root Widget wrapper (.captwiki-ptabs).
	 */
	function setupInstance( root ) {
		if ( ! root || root.captwikiPtabsReady ) {
			return;
		}
		root.captwikiPtabsReady = true;

		if ( root.getAttribute( 'data-layout' ) === 'accordion' ) {
			setupAccordion( root );
		} else {
			setupTabs( root );
		}
	}

	if ( typeof jQuery !== 'undefined' ) {
		$( window ).on( 'elementor/frontend/init', function () {
			if ( window.elementorFrontend && elementorFrontend.hooks ) {
				elementorFrontend.hooks.addAction(
					'frontend/element_ready/captwiki-woo-product-tab.default',
					function ( $scope ) {
						setupInstance( $scope[ 0 ].querySelector( '.captwiki-ptabs' ) || $scope[ 0 ] );
					}
				);
			}
		} );
	}

	document.addEventListener( 'DOMContentLoaded', function () {
		document.querySelectorAll( '.captwiki-ptabs' ).forEach( setupInstance );
	} );

} )( window.jQuery, window, document );
