const startProject = () => {
	const classList = [...document.getElementById('carousel-home-desktop').classList];
	if (classList.includes('data-banner-parent-carousel--active')) {
		start();
	} else {
		setTimeout(() => {
			startProject();
		}, 100);
	}
};

const startProjectMobile = () => {
	const classListMobile = [...document.getElementById('carousel-home-mobile').classList];
	if (classListMobile.includes('data-banner-parent-carousel--active')) {
		start();
	} else {
		setTimeout(() => {
			startProjectMobile();
		}, 100);
	}
};

const start = () => {
	startJsButton();
	const myCarouselsDesktop = $("#carousel-home-desktop");
	const myCarouselsMobile = $("#carousel-home-mobile");
	const options = {
		interval: 3000,
		pause: "false"
	};
	myCarouselsDesktop.carousel(options);
	myCarouselsMobile.carousel(options);

	//INDICADORES DE SLIDER
	indicatorsReady(myCarouselsMobile,'#carouselHomeMobile');
	indicatorsReady(myCarouselsDesktop,'#carouselHome');

	var btnPause = document.getElementById("pauseCarousel");
	var btnPlay = document.getElementById("playCarousel");
	var btnPauseMobile = document.getElementById("pauseCarouselMobile");
	var btnPlayMobile = document.getElementById("playCarouselMobile");
	var pauseSvg = document.querySelector('.pause-carousel span svg');
	var playSvg = document.querySelector('.play-carousel span svg');
	pauseSvg.setAttribute("viewBox", "0 0 30 30");
	pauseSvg.setAttribute("width", "30px");
	pauseSvg.setAttribute("height", "30px");
	playSvg.setAttribute("viewBox", "0 0 30 30");
	playSvg.setAttribute("width", "30px");
	playSvg.setAttribute("height", "30px");

	btnPause.onclick = (event) => {
		myCarouselsDesktop.carousel('pause');
		$("#pauseCarousel").addClass('d-none');
		$("#playCarousel").removeClass('d-none');
	};
	btnPlay.onclick = (event) => {
		myCarouselsDesktop.carousel('cycle');
		$("#playCarousel").addClass('d-none');
		$("#pauseCarousel").removeClass('d-none');
	};
	btnPauseMobile.onclick = (event) => {
		myCarouselsMobile.carousel('pause');
		$("#pauseCarouselMobile").addClass('d-none');
		$("#playCarouselMobile").removeClass('d-none');
	};
	btnPlayMobile.onclick = (event) => {
		myCarouselsMobile.carousel('cycle');
		$("#playCarouselMobile").addClass('d-none');
		$("#pauseCarouselMobile").removeClass('d-none');
	};
};

const startJsButton = () => {
	//BUTTON ANCLA
	document.querySelectorAll('.js-button').forEach(anchor => {
		anchor.addEventListener('click', function (e) {
			e.preventDefault();
			var yOffset = -100;
			var contenedorScroll = document.getElementById("anchor-huinchaHome");

			contenedorScroll.classList.add("scroll-anchor");

			var y = contenedorScroll.getBoundingClientRect().top + window.pageYOffset + yOffset;
			window.scrollTo({top: y, behavior: 'smooth'});

		});
	});
};


//FUNCION INDICADORES DE SLIDER
function indicatorsReady(myCarousels, idCarousel){
	let totalLi= $(idCarousel + " .carousel-inner .carousel-item ").length;
	if(totalLi <= 1){
		$(idCarousel + " ol.carousel-indicators li:nth-child(1)").addClass('d-none');
		$(idCarousel + " ol.carousel-indicators").addClass('no-indicators');
		$(idCarousel + " .carousel-inner").addClass('no-indicators');
	}
	myCarousels.each(function( index, element ) {
		let myCarousel = $("#"+$(element).attr('id'));
		let indicators = $("#"+$(element).attr('id') + " .carousel-indicators");
		$("#"+$(element).attr('id') +" .carousel-inner").children(".carousel-item").each(function(index) {
			if(index === 0) {
				$(idCarousel + " .carousel-inner .carousel-item:nth-child(1)").addClass('active');
				$(idCarousel + " ol.carousel-indicators li:nth-child(1)").addClass('active');
			}
		});
	});
}


startProject();
startProjectMobile();