const CloseModalBtns = document.querySelectorAll('.modal_close')
for (let i = 0; i < CloseModalBtns.length; i++) {
	CloseModalBtns[i].addEventListener('click', closeAllModals)
}

function isInViewport(el) {

	const rect = el.getBoundingClientRect();
	const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
	const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
	const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
	const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
	return (vertInView && horInView);
}
function closeAllModals(e) {
	const MdalWraps = document.querySelectorAll('.modal_wrap')
	for (let i = 0; i < MdalWraps.length; i++) {
		MdalWraps[i].style.display = 'none'
	}
	const ModalWrap = document.querySelector('.oe-modals')
	const modalVideos = ModalWrap.querySelectorAll('.oe-video-widget')
	for (let i = 0; i < modalVideos.length; i++) {
		let Iframe = ModalWrap.querySelector('iframe')

		let src = Iframe.getAttribute('src')
		Iframe.setAttribute('src', '')
		Iframe.setAttribute('src', src)
	}

	document.querySelector('.oe-modals').classList.remove('fade-in')
	document.querySelector('.oe-modals').style.display = 'none'
	document.querySelector('.oe-modals').style.opacity = '0'


}

function handleOpenModal(modalId) {
	const modal = document.getElementById(modalId);
	if (!modal) return;
	document.querySelector('.oe-modals').style.opacity = '0'
	document.querySelector('.oe-modals').style.display = 'block'
	document.querySelector('.oe-modals').classList.add('fade-in')
	modal.style.display = 'block'
	document.querySelector('.oe-modals').style.opacity = '1'
}

//modal backgroundclicck event
// document.querySelector('.oe_modal_background').addEventListener('click',closeAllModals)
// var currentTime =  Math.trunc((new Date()).getTime() / 1000);
let countdownTimers = document.querySelectorAll('[countdown]')
window.setInterval(() => {
	for (let i = 0; i < countdownTimers.length; i++) {
		countDownTimer(countdownTimers[i])
	}
}, 1000)

function countDownTimer(el) {
	const date = el.getAttribute('countdown')
	const now = Math.trunc((new Date()).getTime() / 1000)
	let dateInMilliseconds = Math.trunc(Date.parse(date) / 1000)
	let seconds = (dateInMilliseconds - now) % 60;
	let minutes = Math.trunc((dateInMilliseconds - now) / 60) % 60;
	let hours = Math.trunc((dateInMilliseconds - now) / 60 / 60) % 24;
	let days = Math.trunc((dateInMilliseconds - now) / 60 / 60 / 24);
	el.querySelector('.seconds').innerHTML = twoDigits(seconds)
	el.querySelector('.minutes').innerHTML = twoDigits(minutes)
	el.querySelector('.hours').innerHTML = twoDigits(hours)
	el.querySelector('.days').innerHTML = twoDigits(days)
}
function twoDigits(value) {
	if (value < 0) {
		return '00';
	}
	if (value.toString().length <= 1) {
		return `0${value}`;
	}
	return value;
}

function clickHandler(e) {
	e.preventDefault();
	const href = this.getAttribute("href");
	if (href == '#') return;
	const targetElement = document.querySelector(href)
	if (!targetElement) return
	const offsetTop = targetElement.offsetTop;
	scroll({
		top: offsetTop,
		behavior: "smooth"
	});
}

const links = document.querySelectorAll("body a");
for (const link of links) {
	if (link.hasAttribute('href')) {
		if (link.getAttribute('href').charAt(0) === '#') {
			link.addEventListener("click", clickHandler);
		}
	}
}

function gridResize(){
	let oeGrids = document.querySelectorAll('.oe-grid')
	if(oeGrids.length){
		for(let i=0; i<oeGrids.length; i++){
			let oeGridWidth = oeGrids[i].offsetWidth
			let oeGridParent = oeGrids[i].closest('.oe-grid-widget')
			let oeGridParentWidth = oeGridParent.offsetWidth
			let paddingLeft = parseInt(window.getComputedStyle(oeGrids[i], null).getPropertyValue('padding-left'))
			let paddingRight = parseInt(window.getComputedStyle(oeGrids[i], null).getPropertyValue('padding-right'))
			oeGrids[i].style.setProperty('--grid-gw', (oeGridParentWidth-(parseInt(paddingLeft)+parseInt(paddingRight)))+'px')
		}
	}
	let oeStacks = document.querySelectorAll('.oe-stack')
	if(oeStacks.length){
		for(let i=0; i<oeStacks.length; i++){
			let oeGridWidth = oeStacks[i].offsetWidth
			let oeGridParent = oeStacks[i].closest('.oe-draggable-widget')
			let oeGridParentWidth = oeGridParent.offsetWidth
			let paddingLeft = parseInt(window.getComputedStyle(oeStacks[i], null).getPropertyValue('padding-left'))
			let paddingRight = parseInt(window.getComputedStyle(oeStacks[i], null).getPropertyValue('padding-right'))
			oeStacks[i].style.setProperty('--grid-gw', (oeGridParentWidth-(parseInt(paddingLeft)+parseInt(paddingRight)))+'px')
			registerStackWidgetMenu(oeStacks[i].closest('.oe-stack-widget-wrapper'));
		}
	}
}
const RegisteredStackWidgets = [];
const RegisteredLightboxes = [];

function registerModalButtons() {
	const modalButtons = document.querySelectorAll('[modal]')
	for (let i = 0; i < modalButtons.length; i++) {
		const modalId = modalButtons[i].getAttribute('modal');
		if (!modalId) continue;
		console.log('Normal modal for ', modalId)
		modalButtons[i].addEventListener('click', e => {
			e.preventDefault();
			handleOpenModal(modalId)
		})
	}
}

function updateStackWidget(widget) {
	for (let b=0; b<widget.tabButtons.length; b++) {
		if (widget.tabButtons[b].id == widget.currentLayerId) {
			widget.tabButtons[b].button.classList.add('selected')
		} else {
			widget.tabButtons[b].button.classList.remove('selected')
		}
	}
	const currentIndex = widget.layers.findIndex((l) => l.id == widget.currentLayerId);
	const currentLayer =  widget.layers[currentIndex];
	widget.stackControl.style.setProperty('--stack-active-page',currentIndex);
	let useBlur = widget.style == 'stack'
	let forceVisible = useBlur;
	for (let l=0; l<widget.layers.length; l++) {
		if (widget.layers[l].id == widget.currentLayerId) {
			widget.layers[l].container.classList.remove('oe-stack-hidden')
			widget.layers[l].container.classList.remove('oe-stack-blur')
			widget.layers[l].container.classList.add('oe-stack-active')
			forceVisible = false;
		} else {
			widget.layers[l].container.classList.remove('oe-stack-active')
			if (!useBlur) {
				widget.layers[l].container.classList.remove('oe-stack-hidden')
				widget.layers[l].container.classList.remove('oe-stack-blur')
			} else {
				if (forceVisible) {
					widget.layers[l].container.classList.remove('oe-stack-hidden')
					widget.layers[l].container.classList.add('oe-stack-blur')
				} else {
					widget.layers[l].container.classList.add('oe-stack-hidden')
					widget.layers[l].container.classList.remove('oe-stack-blur')
				}
			}
		}
	}
	if (!widget.seen) return;
	if (widget.moveNextTimeout !== null) {
		clearTimeout(widget.moveNextTimeout)
		widget.moveNextTimeout = null;
	}
	if (currentLayer.duration && currentLayer.duration > 0) {
		const timeoutWidget = widget;
		widget.moveNextTimeout = setTimeout(function () {
			timeoutWidget.moveNextTimeout = null;
			handleStackMoveNext(timeoutWidget);
		}, currentLayer.duration*1000);
	}
}

function handleStackMovePrevious(widget) {
	const currentIndex = widget.layers.findIndex((l) => l.id == widget.currentLayerId);
	const layerCount = widget.layers.length;
	if (currentIndex == 0 && !widget.infiniteNavigation) return;
	widget.currentLayerId = widget.layers[(currentIndex == 0?layerCount:currentIndex)-1].id;
	updateStackWidget(widget)
}

function handleStackMoveNext(widget) {
	const currentIndex = widget.layers.findIndex((l) => l.id == widget.currentLayerId);
	const layerCount = widget.layers.length;
	if (currentIndex == layerCount-1 && !widget.infiniteNavigation) return
	widget.currentLayerId = widget.layers[(currentIndex == layerCount-1) ? 0 : currentIndex+1].id;
	updateStackWidget(widget)
}

function handleStackShowLayer(widget, layerId) {
	widget.currentLayerId = layerId;
	updateStackWidget(widget)
}

function updateStackWidgets() {
	for (let w=0; w<RegisteredStackWidgets.length; w++) {
		const widget = RegisteredStackWidgets[w];
		if (widget.seen) continue;
		if (!isInViewport(widget.stackControl)) {
			continue;
		}
		widget.seen = true;
		updateStackWidget(widget);
	}
}

function registerStackWidgetMenu(widget) {
	const id = widget.closest('.oe-draggable-widget').getAttribute('id');
	if (RegisteredStackWidgets.findIndex((w) => w.id == id) !== -1) return;
	const newWidget = {
		id: id,
		style: widget.getAttribute('stack-style'),
		transitionType: widget.getAttribute('stack-transition-type'),
		infiniteNavigation: widget.getAttribute('stack-navigation-infinite') === 'true',
		layers: [],
		tabButtons: [],
		stackControl: widget,
		currentLayerId: null,
		prevButton: null,
		nextButton: null,
		moveNextTimeout: null,
		seen: false,
	}
	const childNodes = widget.getElementsByTagName("*")
	for (let n=0; n< childNodes.length; n++) {
		const node = childNodes[n];
		if (!node.classList) continue;
		if (node.classList.contains('oe-stack-menu-tab')) {
			if (node.classList.contains('oe-stack-menu-button-previous')) {
				newWidget.prevButton = node;
				node.addEventListener('click', function () { handleStackMovePrevious(newWidget)});
			} else if (node.classList.contains('oe-stack-menu-button-next')) {
				newWidget.nextButton = node;
				node.addEventListener('click', function () { handleStackMoveNext(newWidget)});
			} else {
				const buttonLayerId = node.getAttribute('layer-id');
				newWidget.tabButtons.push({
					button: node,
					id: buttonLayerId
				});
				node.addEventListener('click', function () { handleStackShowLayer(newWidget, buttonLayerId)});
			}
		} else if (node.classList.contains('oe-stack')) {
			const layerId = node.getAttribute('layer-id');
			newWidget.layers.push({
				id: layerId,
				container: node,
				duration: node.getAttribute('layer-duration') || null
			});
			if (newWidget.currentLayerId === null && node.classList.contains('oe-stack-active')) {
				newWidget.currentLayerId = layerId;
			}
		}
	}
	RegisteredStackWidgets.push(newWidget);
}

const trapLightboxFocus = (element) => {

	const handleKeydown = e => {
		e.preventDefault();
		switch (e.key) {
			case 'Left':
			case 'ArrowLeft':
				handleLightboxPrev();
				break;
			case 'ArrowRight':
			case 'Right':
				handleLightboxNext();
				break;
			case 'Escape':
			case 'Esc':
				handleLightboxClose();
				break;
		}
	};

	document.addEventListener("keydown", handleKeydown, true);

	return {
		onClose: () => {
			document.removeEventListener("keydown", handleKeydown, true);
		}
	};
};

function updateLightboxControls() {
	const lightboxModal = document.getElementById('site-lightbox-modal');
	const slides = parseInt(lightboxModal.getAttribute('lightbox-slides'));
	let currentIdx = parseInt(lightboxModal.style.getPropertyValue('--lightbox-active-slide'));
	document.getElementById('site-lightbox-modal-next').style.display = currentIdx<(slides-1)?'block':'none';
	document.getElementById('site-lightbox-modal-prev').style.display = currentIdx>0?'block':'none'
}

function showLightbox(lightboxId, lightboxElementId) {
	const lightboxIdx = RegisteredLightboxes.findIndex((lb) => lb.id == lightboxId);
	if (lightboxIdx === -1) return;
	const lightbox = RegisteredLightboxes[lightboxIdx];
	let lightboxModal = document.getElementById('site-lightbox-modal');
	let lightboxModalContent = document.getElementById('site-lightbox-modal-content');
	lightboxModalContent.innerHTML = '';
	let activeSlideIdx = 0;
	for (let e = 0; e< lightbox.elements.length; e++) {
		const element = lightbox.elements[e];
		if (element.id == lightboxElementId) activeSlideIdx = e;
		const slideDiv = document.createElement('div');
		slideDiv.classList.add('site-lightbox-modal-slide');
		if (element.type == 'IMG') {
			const elementImg = document.createElement('img');
			elementImg.setAttribute('src', element.src);
			elementImg.style['max-width'] = '100%';
			elementImg.style['max-height'] = '100%';
			elementImg.style['object-fit'] = 'contain';//'scale-down';
			elementImg.style['display'] = 'block';
			elementImg.setAttribute('src', element.src);
			if (element.modal) {
				elementImg.style['cursor'] = 'pointer';
				elementImg.addEventListener('click', function () {
					handleLightboxClose();
					handleOpenModal(element.modal);
				});
			}
			if (element.modal) {
				elementImg.style['cursor'] = 'pointer';
				elementImg.addEventListener('click', function () {
					handleLightboxClose();
					handleOpenModal(element.modal);
				});
				slideDiv.appendChild(elementImg)
			} else if (element.href && element.href !== '#') {
				const elementAnchor = document.createElement('a');
				elementAnchor.setAttribute('href', element.href);
				elementAnchor.setAttribute('target', element.target);
				elementAnchor.addEventListener('click', function () {
					handleLightboxClose();
				})
				elementAnchor.style['width'] = '100%';
				elementAnchor.style['height'] = '100%';
				elementAnchor.style['display'] = 'contents';
				elementAnchor.appendChild(elementImg)
				slideDiv.appendChild(elementAnchor);
			} else {
				slideDiv.appendChild(elementImg)
			}
		} else if (element.type = 'IFRAME') {
			const elementIframe = document.createElement('iframe');
			elementIframe.setAttribute('src', `${element.src}&autoplay=1&autopause=1&loop=1&mute=0`);
			elementIframe.setAttribute('allow', 'autoplay; fullscreen');
			elementIframe.setAttribute('allowfullscreen', 'allowfullscreen');
			elementIframe.style['max-width'] = '100%';
			elementIframe.style['max-height'] = '100%';
			elementIframe.style['width'] = '100%';
			elementIframe.style['display'] = 'block';
			elementIframe.setAttribute('allowtransparency', 'true');
			elementIframe.setAttribute('frameborder', '0');
			if (element.provider == 'youtube') {
				elementIframe.style['height'] = 'calc(100vw/1.77)';
				elementIframe.style['margin-top'] = 'max(0px, calc( 50vh - 50vw/1.77 - 50px))';
				setTimeout(function () {
					elementIframe.contentWindow.postMessage('{"event":"command","func":"startVideo","args":""}', '*');
				}, 700);
			} else if (element.provider == 'vimeo') {
				setTimeout(function () {
					elementIframe.contentWindow.postMessage('{"event":"command","func":"startVideo","args":""}', '*');
				}, 700);
			}
			slideDiv.appendChild(elementIframe)
		}
		lightboxModalContent.appendChild(slideDiv);
	}
	lightboxModal.style.setProperty('--lightbox-active-slide',activeSlideIdx);
	lightboxModal.setAttribute('lightbox-slides', lightbox.elements.length);
	updateLightboxControls();
	lightboxModal.style.opacity = '0';
	lightboxModal.style.display = 'block';
	window.trappedLightboxFocus = trapLightboxFocus(lightboxModal);

	setTimeout(function () {
		lightboxModal.style.opacity = '1';
	}, 500);
}

function handleLightboxNext() {
	const lightboxModal = document.getElementById('site-lightbox-modal');
	const slides = parseInt(lightboxModal.getAttribute('lightbox-slides'));
	let currentIdx = parseInt(lightboxModal.style.getPropertyValue('--lightbox-active-slide'));
	currentIdx += 1;
	if (currentIdx > (slides-1)) currentIdx = slides-1;
	lightboxModal.style.setProperty('--lightbox-active-slide', currentIdx);
	updateLightboxControls();
}

function handleLightboxPrev() {
	const lightboxModal = document.getElementById('site-lightbox-modal');
	const slides = parseInt(lightboxModal.getAttribute('lightbox-slides'));
	let currentIdx = parseInt(lightboxModal.style.getPropertyValue('--lightbox-active-slide'));
	currentIdx -= 1;
	if (currentIdx<0) currentIdx = 0;
	lightboxModal.style.setProperty('--lightbox-active-slide', currentIdx);
	updateLightboxControls();
}

function handleLightboxClose() {
	let lightboxModal = document.getElementById('site-lightbox-modal');
	let lightboxModalContent = document.getElementById('site-lightbox-modal-content');
	if (window.trappedLightboxFocus) {
		window.trappedLightboxFocus.onClose();
		window.trappedLightboxFocus = null;
	}
	lightboxModal.style.opacity = 0;
	setTimeout(function () {
		lightboxModal.style.display = 'none';
		lightboxModalContent.innerHTML = '';
	}, 500);
}

function registerLightboxes() {
	document.getElementById('site-lightbox-modal-close').addEventListener('click', function () {
		handleLightboxClose();
	})
	document.getElementById('site-lightbox-modal-next').addEventListener('click', function () {
		handleLightboxNext();
	})
	document.getElementById('site-lightbox-modal-prev').addEventListener('click', function () {
		handleLightboxPrev();
	})
	let elements = document.querySelectorAll('[lightbox-id]');
	for (let i = 0; i < elements.length; i++) {
		const element = elements[i];
		const lightboxId = element.getAttribute('lightbox-id');
		if (!lightboxId) continue;
		const lightboxIdx = RegisteredLightboxes.findIndex((lb) => lb.id == lightboxId);
		const lightboxElement = {
			id: element.getAttribute('lightbox-element-id'),
			type : element.tagName,
			src : element.getAttribute('src'),
			modal: null,
			href: null,
			target: null,
		}
		// Catch modal link action so we handle after element is viewed
		const elementModalId = element.getAttribute('modal')
		if (elementModalId) {
			element.removeAttribute('modal');
			if (element.parentElement.tagName = 'A') element.parentElement.removeAttribute('modal');
			lightboxElement.modal = elementModalId;
		}
		if (element.parentElement.tagName == 'A') {
			lightboxElement.href = element.parentElement.getAttribute('href');
			lightboxElement.target = element.parentElement.getAttribute('target');
			element.parentElement.removeAttribute('href');
			element.parentElement.removeAttribute('target');
		}
		if (lightboxElement.type == 'IMG') {
			element.style['pointer-events'] = 'all';
			element.style['cursor'] = 'pointer';
		}
		if (lightboxElement.type == 'IFRAME') {
			lightboxElement['provider'] = element.getAttribute('video-provider');
			element.parentNode.addEventListener('click', function () {
				showLightbox(lightboxId, lightboxElement.id)
			})
			element.style['pointer-events'] = 'none';
			element.setAttribute('src', `${lightboxElement.src}&controls=0` )
		} else {
			element.addEventListener('click', function () {
				showLightbox(lightboxId, lightboxElement.id)
			})
		}
		if (lightboxIdx !== -1) {
			RegisteredLightboxes[lightboxIdx].elements.push(lightboxElement);
		} else {
			RegisteredLightboxes.push({
				id: lightboxId,
				elements: [lightboxElement]
			})
		}
	}
}

// Initialize dynamic elements

document.addEventListener("DOMContentLoaded", () => {
	gridResize()
	updateStackWidgets();
	registerLightboxes();
	registerModalButtons();
	window.addEventListener("resize", gridResize);
	window.addEventListener("scroll", function () {
		updateStackWidgets();
	})
});