import DOM from './data/domData';

const setCurrent = (nav) => {
	//-currentクラスをいったん削除
	const currentItem = nav.querySelector('li.-current');
	if (currentItem) currentItem.classList.remove('-current');

	// トップページのURL
	const homeUrl = window.arkheVars.homeUrl || '';

	//現在のURLを取得 （? や # はのぞいたもの）
	const nowHref = window.location.origin + window.location.pathname;

	// トップページは、カレントクラス付与しない
	if (homeUrl === nowHref) return;

	// 全liを取得
	const navItem = nav.querySelectorAll('.c-gnav > li');
	for (let i = 0; i < navItem.length; i++) {
		const li = navItem[i];

		const a = li.querySelector('a');
		const href = a.getAttribute('href');

		//現在のURLと一致していれば、-currentクラスを付与
		if (nowHref === href) {
			li.classList.add('-current');
		}
	}
};

/**
 * setGnavClass
 *
 */
export default function () {
	const gnav = DOM.gnav;
	if (null === gnav) return;
	// グロナビに -current つける
	setCurrent(gnav);

	const gnavMenu = gnav.querySelector('.c-gnav');

	if (null === gnavMenu) return false;

	const links = gnavMenu.getElementsByTagName('a');

	for (let i = 0; i < links.length; i++) {
		const link = links[i];
		link.addEventListener('focus', toggleFocus, true);
		link.addEventListener('blur', toggleFocus, true);
	}

	//Sets or removes the .focus class on an element.
	function toggleFocus() {
		let self = this;
		// console.log(self);

		// Move up through the ancestors of the current link until we hit .primary-menu.
		while (!self.classList.contains('c-gnav')) {
			// On li elements toggle the class .focus.
			if ('li' === self.tagName.toLowerCase()) {
				self.classList.toggle('focus');
			}
			self = self.parentElement;
		}
	}
}