window.addEventListener('load', function () {
	var getParams = new URL(window.location.href).searchParams,
		triggerClass = "cta-prenota",
		widget = document.createElement('iframe'),
		closeBtn = document.createElement('button'),
		loader = document.createElement('div'),
		isMobile = /Android|iPhone/i.test(navigator.userAgent),
		bg = document.createElement('div'),
		url = 'https://esercenti.avatable.com/anticatrattoriaparadisi_it/it/widget/noGoogleLogin:1/noFacebookLogin:1/';
	
	widget.id = 'iframe-widget';
	widget.style.border = 0;

	closeBtn.id = 'close-widget';
	closeBtn.type = 'button';
	closeBtn.innerHTML = "<img alt=\"\" class=\"btn-ico\" src=\"https://esercenti.avatable.com/anticatrattoriaparadisi_it/utenti/anticatrattoriaparadisi_it/cache/_pics/svg/nav_closer1-b8174f9a6641292134292cbd75e654a5.svg\" />";

	loader.id = 'wrap-loader';
	loader.innerHTML = '<div class="bg-loader"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>';

	bg.id = 'bg-widget';
	
		
			var container = document.createElement('div');
		container.id = 'wrap-widget-avatable';
		
	container.appendChild(widget);
	

			var trigger = document.createElement('div');
		trigger.innerHTML = '<button class="' + triggerClass + ' ' + triggerClass + '_footer ' + triggerClass + '_skin " style="">Prenota</button>';
		trigger.style.border = 0;
		trigger.style.position = "fixed";
		trigger.style.bottom = "15px";
		trigger.style.right = "15px";
		trigger.style.zIndex = "500";
		trigger.className = "cta-prenota-cont";
		document.body.appendChild(trigger);
	
	var listaCta = document.getElementsByClassName(triggerClass);
	for (var i = 0; i < listaCta.length; i++) {
		listaCta[i].addEventListener('click', clickApriPopup, false);
	}

	function clickApriPopup(e) {
		e.preventDefault();
		apriPopup(this);
	}

	function apriPopup(ele = undefined) {
		
		var frameUrl = url;
		if(ele){
			var idEvento = ele.dataset.evento;
			if(idEvento) {
				frameUrl += (frameUrl.indexOf("?")==-1?"?":"&")+"evento_id=" + idEvento;
			}
		
			var idServizio = ele.dataset.servizio;
			if (idServizio) {
				frameUrl += (frameUrl.indexOf("?")==-1?"?":"&")+"servizio_id=" + idServizio;
			}
		}
		
		if (document.getElementById(container.id)) {
			let curUrl = document.getElementById('iframe-widget').src;
			if (true || curUrl != frameUrl) {
				fadeInEffect(document.getElementById('wrap-loader'));
				fadeInEffect(document.getElementById(container.id));

				document.getElementById('iframe-widget').onload = function () {
					// console.log('fine caricamento');
					fadeInEffect(document.getElementById('iframe-widget'));
					fadeOutEffect(document.getElementById('bg-widget'));
					fadeOutEffect(document.getElementById('wrap-loader'));
				}
				document.getElementById('iframe-widget').src = frameUrl;

			} else {
				fadeInEffect(document.getElementById('iframe-widget'));
				fadeInEffect(document.getElementById(container.id));
				fadeInEffect(document.getElementById('bg-widget'));
			}

		} else {
			document.body.appendChild(container);
			document.getElementById(container.id).appendChild(closeBtn);
			document.getElementById(container.id).appendChild(widget);
			document.getElementById(container.id).appendChild(loader);
			fadeOutEffect(document.getElementById('iframe-widget'), 0);

			document.getElementById('iframe-widget').onload = function () {
				// console.log('fine caricamento 2');
				fadeInEffect(document.getElementById('iframe-widget'));
				fadeOutEffect(document.getElementById('bg-widget'));
				fadeOutEffect(document.getElementById('wrap-loader'));
			}
			document.getElementById('iframe-widget').src = frameUrl;
		}

		fadeOutEffect(document.getElementById('iframe-widget'), 0);
		fadeInEffect(document.getElementById('bg-widget'));
	}

	function fadeInEffect(ele, time = 400) {
		if (ele) {
			ele.style.opacity = 0;
			ele.style.display = 'flex';

			for (let i = 1; i <= 100; i++) {
				setTimeout(function () {
					ele.style.opacity = i / 100;
				}(time / 100))
			}
		}
	}

	function fadeOutEffect(ele, time = 400) {
		if (ele) {
			ele.style.opacity = 1;
			for (let i = 100; i >= 0; i--) {
				setTimeout(function () {
					ele.style.opacity = i / 100;
				}(time / 100))
				if (i == 0) {
					ele.style.display = 'none';
				}
			}
		}
	}


	if (getParams.get("prenota")) apriPopup();

	bg.onclick = function () {
		fadeOutEffect(document.getElementById(container.id));
		fadeOutEffect(document.getElementById('bg-widget'));
		fadeOutEffect(document.getElementById('iframe-loader'));
	}

	closeBtn.onclick = function () {
		fadeOutEffect(document.getElementById(container.id));
		fadeOutEffect(document.getElementById('bg-widget'));
		fadeOutEffect(document.getElementById('iframe-loader'));
	}

	const styleWidget = document.createElement('style');
	styleWidget.innerText = `
	#` + container.id + ` {
		position: fixed;
		bottom: ` + (isMobile ? '0' : '10px' ) + `;;
		right: ` + (isMobile ? '0' : '10px' ) + `;
		width: ` + (isMobile ? '100%' : '360px' ) + `;
		box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
		 height: ` + (isMobile ? '100%' : '600px' ) + `;
		z-index: 10000;
		border-radius: 0.3rem;
	}
	#` + container.id + ` iframe {
		border: 0px;
		height: 100%;
		width: 100%;
	}
	#` + container.id + ` #close-widget {
		position: absolute;
		top: 10px;
		right: 0;
		border: none;
		background: none;
		padding: 10px;
	}
	#` + container.id + ` #close-widget .btn-ico {
		width					: 2em;
		height					: 2em;
		aspect-ratio			: 1;
	}
	
	#` + container.id + ` #wrap-loader {
		position: absolute;
		top: 0;
		left: 0;
		background-color: #F7EABA;		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#` + container.id + ` #wrap-loader .lds-ring {
		
		display			: inline-block;
		position		: relative;
		width			: 5em;
		height			: 5em;
	}
	
	#` + container.id + ` #wrap-loader .lds-ring	div {
		box-sizing			: border-box;
		display				: block;
		position			: absolute;
		width				: 5em;
		height				: 5em;
		margin				: 0;
		border				: 0.4em solid #8c2929;		border-radius		: 50%;
		animation			: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		border-color		: #8c2929 transparent transparent transparent;	}
		
	#` + container.id + ` #wrap-loader 	.lds-ring div:nth-child(1) {
		animation-delay: -0.45s;
	}
	#` + container.id + ` #wrap-loader 	.lds-ring div:nth-child(2) {
		animation-delay: -0.3s;
	}
	#` + container.id + ` #wrap-loader 	.lds-ring div:nth-child(3) {
		animation-delay: -0.15s;
	}
	
	@keyframes lds-ring {
		0% 		{ transform: rotate(0deg); }
		100% 	{ transform: rotate(360deg); }
	}
	`;
	document.body.appendChild(styleWidget);

});