import DOM from './data/domData';
import { setState } from '@js/modules/data/stateData';

/**
 * クリックイベント処理をまとめたオブジェクト
 */
export const clickEvents = {
	pageTop() {
		const thisFunc = clickEvents.pageTop;
		const nowY = window.pageYOffset;
		window.scrollTo( 0, Math.floor( nowY * 0.8 ) );
		if ( 0 < nowY ) {
			window.setTimeout( thisFunc, 10 );
		}
	},
	toggleMenu( e ) {
		e.preventDefault();

		const drawerMenu = DOM.drawerMenu;
		if ( null === drawerMenu ) return false;

		// マウスクリックで発火したイベントかどうか
		const isMouseClicked = 0 !== e.screenX && 0 !== e.screenY;

		// クリックされたドロワーメニューのトグルボタンをセット
		const theToggleBtn = e.currentTarget;
		DOM.drawerToggleBtn = theToggleBtn;

		const dataDrower = document.documentElement.getAttribute( 'data-drawer' );
		if ( 'opened' !== dataDrower ) {
			// オープン処理
			document.documentElement.setAttribute( 'data-drawer', 'opened' );
			setState.modalOpen( true );

			// クリックしたボタンを記憶
			DOM.lastFocusedElem = theToggleBtn;
		} else {
			// クローズ処理
			document.documentElement.setAttribute( 'data-drawer', 'closed' );

			// キー操作でクローズした場合、元のボタンにフォーカスを戻す
			if ( ! isMouseClicked && DOM.lastFocusedElem ) {
				DOM.lastFocusedElem.focus();
				DOM.lastFocusedElem = null;
				setState.modalOpen( false );
			}
		}
	},
	toggleSearch( e ) {
		e.preventDefault();

		const searchModal = DOM.searchModal;
		if ( null === searchModal ) return false;

		// マウスクリックで発火したイベントかどうか
		const isMouseClicked = 0 !== e.screenX && 0 !== e.screenY;

		// クリックされた検索トグルボタンをセット
		const theToggleBtn = e.currentTarget;
		// DOM.searchToggleBtn = theToggleBtn;

		if ( ! searchModal.classList.contains( 'is-open' ) ) {
			// オープン処理
			searchModal.classList.add( 'is-open' );
			setState.modalOpen( true );

			// クリックしたボタンを記憶
			DOM.lastFocusedElem = theToggleBtn;

			// 入力エリアにフォーカス
			setTimeout( () => {
				searchModal.querySelector( '[name="s"]' ).focus();
			}, 250 );
		} else {
			// クローズ処理
			searchModal.classList.remove( 'is-open' );

			// キー操作でクローズした場合、元のボタンにフォーカスを戻す
			if ( ! isMouseClicked && DOM.lastFocusedElem ) {
				DOM.lastFocusedElem.focus();
				DOM.lastFocusedElem = null;
				setState.modalOpen( false );
			}
		}
	},

	/**
	 * サブメニューのアコーディオン
	 */
	toggleSubmenu( e ) {
		e.preventDefault();
		const btn = e.currentTarget;
		const submenu = btn.parentNode.nextElementSibling;

		btn.classList.toggle( 'is-opened' );
		submenu.classList.toggle( 'is-opened' );

		e.stopPropagation();
	},
};

/**
 * data-onclick属性を持つ要素にクリックイベントを登録
 *
 * @param {*} dom 該当要素を検索する親（ AJAXで読み込んだ要素からも探せるように引数化 ）
 */
export default function addClickEvents( dom ) {
	const elemsHasClickEvent = dom.querySelectorAll( '[data-onclick]' );
	for ( let i = 0; i < elemsHasClickEvent.length; i++ ) {
		const elem = elemsHasClickEvent[ i ];
		if ( elem ) {
			const funcName = elem.getAttribute( 'data-onclick' );
			const clickFunc = clickEvents[ funcName ];
			elem.addEventListener( 'click', function ( e ) {
				clickFunc( e );
			} );
		}
	}
}