import Splide from '@splidejs/splide';

// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------

// UTILS

const body = document.body;

// SLIDER

let splide = document.querySelector('.splide');

// IFRAME LOADING ANIMATIONS

const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
const logoIcon = document.querySelector('.logo__icon');
const exhibitionIframe = document.querySelector('.exhibition');

// ----------------------------------------------------------------------------
// LOGIC
// ----------------------------------------------------------------------------

// UTILS

// Enable CSS :active pseudo-class in Safari Mobile
function enableActivePseudoClass() {
	document.addEventListener("touchstart", function() {},false);
}

// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
	let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
	return rem * fontSize;
}

// SLIDER

function setUpSlider() {
	if (splide) {
		splide = new Splide('.splide', {
			type: 'fade',
			rewind: true,
			rewindByDrag: true,
			speed: 400,
			fixedWidth: '100vw',
			fixedHeight: '100vh',
			arrows: false,
			pagination: false,
			easing: 'ease-in-out',
			drag: true,
			wheel: true
		}).mount();
	}
}

function goToNextSlideOnClick() {
	if (splide) {
		splide.on('click', function(e) {
			splide.go('>');
		});		
	}
}

// IFRAME LOADING ANIMATIONS

function enableLogoIconRotation() {
	if (logoIcon) {
		logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
	}
}

function disableLogoIconRotation() {
	if (logoIcon) {
		logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
	}
}

function slimDownSidebar() {
	if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
		sidebar.classList.add('sidebar--slimmed');
	}
}

function enableExhibitionIframeVisibility() {
	if (exhibitionIframe) {
		exhibitionIframe.classList.add('exhibition--visible');
	}
}

function disableExhibitionIframeVisibility() {
	if (exhibitionIframe) {
		exhibitionIframe.classList.remove('exhibition--visible');
	}
}

function editBackgroundColor(sidebarNavLink) {
	if (body && sidebar) {
		if (sidebarNavLink.getAttribute('data-background') === 'feldgrau') {
			body.classList.remove('body--white-background');
			sidebar.classList.remove('sidebar--white-background');
		} else if (sidebarNavLink.getAttribute('data-background') === 'white') {
			body.classList.add('body--white-background');
			sidebar.classList.add('sidebar--white-background');
		}
	}
}

function loadExhibitionIframe() {
	if (sidebarNavLinks.length > 0 && exhibitionIframe) {
		for (let i = 0; i < sidebarNavLinks.length; i++) {
			sidebarNavLinks[i].addEventListener('click', function(e) {
				logoIcon.removeEventListener('animationiteration', disableLogoIconRotation);
				enableLogoIconRotation();
				disableExhibitionIframeVisibility();
				exhibitionIframe.addEventListener('load', function(e) {
					logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
					slimDownSidebar();
					enableExhibitionIframeVisibility();
					editBackgroundColor(sidebarNavLinks[i]);
				});
			});
		}
	}
}

// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------

// UTILS

enableActivePseudoClass();

// SLIDER

setUpSlider();
goToNextSlideOnClick();

// IFRAME LOADING ANIMATIONS

loadExhibitionIframe();