// Helper - Debounce
const debounce = (callback, wait) => {
	let timeoutId = null;
	return (...args) => {
		window.clearTimeout(timeoutId);
		timeoutId = window.setTimeout(() => {
			callback.apply(null, args);
		}, wait);
	};
}
// Helper - Throttler
let throttleTimer;
const throttle = (callback, time) => {
	if (throttleTimer) return;
		throttleTimer = true;
		setTimeout(() => {
			callback();
			throttleTimer = false;
		}, time);
}

// Calc Viewport
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;
let isMobil = true;

const getViewportSize = debounce((ev) => {
	viewportWidth = window.innerWidth;
	//if ( viewportWidth >= '720' ) isMobil = false;
	isMobil = viewportWidth >= '720' ? false : true;
}, 60);

// Load Inits
if ( viewportWidth >= '720' ) {
	document.querySelector('.offcanvas').setAttribute('aria-hidden', 'true');
	isMobil = false;
}

// Hide Subnav when Mainnav reached Top
const mainNav = document.getElementById("nav-main");
const observerNav = new IntersectionObserver( 
  ([e]) => e.target.toggleAttribute('stuck', e.intersectionRatio < 1),
  { rootMargin: '-1px 0px 0px 0px', threshold: [1] }
);
observerNav.observe(mainNav);

// Calc SubNav Height
let activeSubNav = document.querySelector('.nav-main__sub.active');
let activeSubNavHeight = 0;
if (activeSubNav) {
	activeSubNavHeight = document.querySelector('.nav-main__sub.active').offsetHeight;
} 
 
let activeSubNavHeightStart = activeSubNavHeight;
const primaryMain = document.querySelector('.primary-main');
mainNav.style.cssText = '--activeSubNavHeight:'+(activeSubNavHeight+11)+'px';

const setSubNavHeight = debounce((ev) => {
	if (activeSubNav) {
		activeSubNavHeight = document.querySelector('.nav-main__sub.active').offsetHeight;
		// console.log('seb1');
	}
	if (activeSubNavHeight != activeSubNavHeightStart) {
		mainNav.style.cssText = '--activeSubNavHeight:'+(activeSubNavHeight+11)+'px';
		// console.log('seb2');
	}
}, 60);


// Main Search Form Animation & Function
const mainSiteSearch = document.getElementById('siteSearch');
const mainSearchBtn = document.getElementById('searchBtn');
const mainSearchInput = document.getElementById('fsearchphrase_1');

mainSearchBtn.addEventListener('click', function(event) {
	if ( viewportWidth >= '600' ) {
		if ( mainSearchInput.style.cssText == '--deskt-search-width: 0%;' || mainSearchInput.style.cssText == ''  ) {
			mainSearchInput.style.cssText = '--deskt-search-width: 600%;';
			mainSearchInput.focus();
		} else {
			mainSearchInput.style.cssText = '--deskt-search-width: 0%;';
		}
	}
});
mainSiteSearch.addEventListener("submit", function(event) {
	if (mainSearchInput && !mainSearchInput.value) {
		event.preventDefault();
	}
}, true);

// OffCanvas Menu
const offcanvasBTN = document.querySelector('.ham-btn');
const offcanvasBG = document.querySelector('.screen-visible');
const offcanvasMenu = document.querySelector('.nav-main-holder');
const hamTarget = document.getElementById('ham-target');
const offcanvasHolder = document.querySelector('.offcanvas');

function offcanvasOption() {
	if ( window.getComputedStyle(offcanvasHolder).display != 'none' ) {
		offcanvasHolder.setAttribute('aria-hidden', false);
	} else {
		offcanvasHolder.setAttribute('aria-hidden', true);
	}
}

document.querySelectorAll('.screen-visible, .ham-btn').forEach(item => {
	item.addEventListener('click', event => {
		offcanvasMenu.toggleAttribute('data-visible');
		offcanvasBG.toggleAttribute('data-visible');
		mainSearchInput.style.cssText = '';
		if ( offcanvasMenu.hasAttribute('data-visible') ) {
			offcanvasBTN.setAttribute('aria-expanded', true);
			offcanvasBTN.querySelector('svg').innerHTML = '<path d="M96.025 9.844 86.132-.049 48.025 38.058 9.918-.049.025 9.844l38.107 38.107L.025 86.058l9.893 9.893 38.107-38.107 38.107 38.107 9.893-9.893-38.107-38.107z"/>';
		} else {
			offcanvasBTN.setAttribute('aria-expanded', false);
			offcanvasBTN.querySelector('svg').innerHTML = '<path d="M60.417 73.594 43.744 53.292a24.072 24.072 0 0 0 4.618-14.213c0-13.355-10.826-24.181-24.181-24.181S0 25.724 0 39.079 10.826 63.26 24.181 63.26a24.06 24.06 0 0 0 11.983-3.174l16.394 19.963a2.544 2.544 0 0 0 3.579.352l3.931-3.227a2.545 2.545 0 0 0 .349-3.58zM5.143 39.079c0-10.514 8.524-19.038 19.038-19.038s19.038 8.524 19.038 19.038-8.524 19.038-19.038 19.038S5.143 49.593 5.143 39.079zm49.558-24.057H96v10.326H54.701V15.022zm12.488 55.754H96v10.326H67.189V70.776zM54.701 42.609H96v10.326H54.701V42.609z"/>';
		}
	})
})

// OffCanvas Open Sub-Menu ontouchstart
if (isMobil) {
	document.querySelectorAll('.nav-main__item--more > a').forEach(item => {
		item.addEventListener('click', event => {
			const submenu = document.querySelectorAll('.nav-main__sub');
			for ( let i = 0; i < submenu.length; i++ ) {
				if ( submenu[i].classList.contains('active') ) {
					submenu[i].classList.remove('active');
					submenu[i].closest('.nav-main__item--more').removeAttribute('style');	
				} else {
					if ( submenu[i].parentNode.querySelector('a') == item ) {
						item.nextElementSibling.classList.add('active');
						item.closest('.nav-main__item--more').style.cssText = '--arrow-rotate:180deg;--arrowBG:var(--clr-neutral-l-100);';	
					}
				}
			}
			event.preventDefault();
		})
	})
};


// Third-Navi
// now in -> /element/container/navigation.tpl

// ABO-Button im Head
const aboBtnHeader = document.getElementById('aboBtnHeader');
const AboBTN = debounce((ev) => {
	if (isMobil) {
		aboBtnHeader.querySelector('a').textContent = 'Abo';
	} else {
		aboBtnHeader.querySelector('a').textContent = 'Abonnieren';
	}
});

// Copy Element function
document.querySelectorAll('.copyUrl')
	.forEach(item => {
	item.addEventListener('click', function() {
		copyText(this.getAttribute("data-copy"));
		flashElement(this);
	})
});

// Main functionality
const copyText = (element) => {
	var textToCopy = element;
	var myTemporaryInputElement = document.createElement("input");
	myTemporaryInputElement.type = "text";
	myTemporaryInputElement.value = textToCopy;
	document.body.appendChild(myTemporaryInputElement);
	myTemporaryInputElement.select();
	document.execCommand("Copy");
	document.body.removeChild(myTemporaryInputElement);
}

// Add class to copied element to denote success
const flashElement = (element) => {
	if (element.classList.contains("ttip")) {
		element.classList.add("flash");
	} else {
		element.querySelector('span').textContent = 'Link wurde kopiert';
	}
	document.addEventListener("transitionend", function() {
		setTimeout(function() {
			if (element.classList.contains("ttip")) {
				element.classList.remove("flash");
			} else {
				element.querySelector('span').textContent = 'Link kopieren';
			}
		}, 1000);
	});
}


// Init
window.addEventListener('resize', () => {    
	getViewportSize();  
	setSubNavHeight();
	offcanvasOption();
	AboBTN();
	//mobilMaiNavClick();
	//if (thirdNavBtn !== null) { thirdNavHandler(); }
});