/**
 * Interactions
 * インタラクション機能
 */

/**
 * トグルボタンの処理
 */
function initToggleButtons() {
	const buttons = document.querySelectorAll( '.zenblocks-toggle-button' );

	buttons.forEach( ( button ) => {
		button.addEventListener( 'click', () => {
			const targetId = button.dataset.target;
			const target = document.getElementById( targetId );

			if ( target ) {
				target.classList.toggle( 'is-visible' );
				button.classList.toggle( 'is-active' );
				button.setAttribute(
					'aria-expanded',
					target.classList.contains( 'is-visible' )
				);
			}
		} );
	} );
}

/**
 * スムーススクロール
 */
function initSmoothScroll() {
	const links = document.querySelectorAll( 'a[href^="#"]' );

	links.forEach( ( link ) => {
		link.addEventListener( 'click', ( e ) => {
			const href = link.getAttribute( 'href' );

			// ハッシュのみの場合はスキップ
			if ( href === '#' ) {
				return;
			}

			const target = document.querySelector( href );

			if ( target ) {
				e.preventDefault();

				const headerOffset = 80;
				const elementPosition = target.getBoundingClientRect().top;
				const offsetPosition =
					elementPosition + window.pageYOffset - headerOffset;

				window.scrollTo( {
					top: offsetPosition,
					behavior: 'smooth',
				} );
			}
		} );
	} );
}

/**
 * タブ切り替え
 */
function initTabs() {
	const tabGroups = document.querySelectorAll( '.zenblocks-tabs' );

	tabGroups.forEach( ( group ) => {
		const tabs = group.querySelectorAll( '.zenblocks-tab' );
		const panels = group.querySelectorAll( '.zenblocks-tab-panel' );

		tabs.forEach( ( tab, index ) => {
			tab.addEventListener( 'click', () => {
				// すべてのタブとパネルを非アクティブ化
				tabs.forEach( ( t ) => {
					t.classList.remove( 'is-active' );
					t.setAttribute( 'aria-selected', 'false' );
				} );
				panels.forEach( ( p ) => {
					p.classList.remove( 'is-active' );
					p.setAttribute( 'aria-hidden', 'true' );
				} );

				// クリックされたタブとパネルをアクティブ化
				tab.classList.add( 'is-active' );
				tab.setAttribute( 'aria-selected', 'true' );
				if ( panels[ index ] ) {
					panels[ index ].classList.add( 'is-active' );
					panels[ index ].setAttribute( 'aria-hidden', 'false' );
				}
			} );
		} );
	} );
}

/**
 * アコーディオン
 */
function initAccordions() {
	const accordions = document.querySelectorAll( '.zenblocks-accordion' );

	accordions.forEach( ( accordion ) => {
		const header = accordion.querySelector( '.zenblocks-accordion-header' );
		const content = accordion.querySelector(
			'.zenblocks-accordion-content'
		);

		if ( ! header || ! content ) {
			return;
		}

		header.addEventListener( 'click', () => {
			const isOpen = accordion.classList.contains( 'is-open' );

			if ( isOpen ) {
				accordion.classList.remove( 'is-open' );
				content.style.maxHeight = null;
				header.setAttribute( 'aria-expanded', 'false' );
			} else {
				accordion.classList.add( 'is-open' );
				content.style.maxHeight = content.scrollHeight + 'px';
				header.setAttribute( 'aria-expanded', 'true' );
			}
		} );
	} );
}

// インタラクションの初期化
document.addEventListener( 'DOMContentLoaded', () => {
	initToggleButtons();
	initSmoothScroll();
	initTabs();
	initAccordions();

} );

export { initToggleButtons, initSmoothScroll, initTabs, initAccordions };
