'use strict';

let navTogglers = document.querySelectorAll("[data-nav-toggler]");
let navToggleBtn = document.querySelector("[data-nav-toggle-btn]");
let navbarHeader = document.querySelector("[data-navbar]");
let overlay = document.querySelector("[data-overlay]");
let header = document.querySelector("[data-header]");
let preloader = document.querySelector("[data-preloader]");

let scroll = function () {
  if (window.scrollY >= 100) {
	header.classList.add("active");
  } else {
	header.classList.remove("active");
  }
}

let resize = function () {
	totalSliderVisibleItems = Number(getComputedStyle(currentSlider).getPropertyValue("--slider-items"));
	totalSlidableItems = sliderContainer.childElementCount - totalSliderVisibleItems;

	moveSliderItem();
}
	  
let toggleNavbar = function () {
  navbarHeader.classList.toggle("active");
  navToggleBtn.classList.toggle("active");
  overlay.classList.toggle("active");
  document.body.classList.toggle("nav-active");
}

let preloaderFn = function () {
	  preloader?.classList.add("loaded");
	  document.body.classList.add("loaded");
}
	
function init() {

	/**
	 * add event listener on multiple elements
	 */

	const addEventOnElements = function (elements, eventType, callback) {
	  for (let i = 0, len = elements.length; i < len; i++) {
		elements[i].removeEventListener(eventType, callback);
		elements[i].addEventListener(eventType, callback);
	  }
	}

	const removeEventOnElements = function (elements, eventType, callback) {
	  for (let i = 0, len = elements.length; i < len; i++) {
		elements[i].removeEventListener(eventType, callback);
	  }
	}



	/**
	 * PRELOADER
	 */

	preloader = document.querySelector("[data-preloader]");

	window.removeEventListener("DOMContentLoaded", preloaderFn);
	window.addEventListener("DOMContentLoaded", preloaderFn);



	/**
	 * NAVBAR
	 * navbar toggle for mobile
	 */

	navTogglers = document.querySelectorAll("[data-nav-toggler]");
	navToggleBtn = document.querySelector("[data-nav-toggle-btn]");
	navbarHeader = document.querySelector("[data-navbar]");
	overlay = document.querySelector("[data-overlay]");

	addEventOnElements(navTogglers, "click", toggleNavbar);



	/**
	 * HEADER
	 * header active when window scroll down to 100px
	 */

	header = document.querySelector("[data-header]");

	window.removeEventListener("scroll", scroll);
	window.addEventListener("scroll", scroll);



	/**
	 * SLIDER
	 */

	const sliders = document.querySelectorAll("[data-slider]");

	const initSlider = function (currentSlider) {

	  const sliderContainer = currentSlider.querySelector("[data-slider-container]");
	  const sliderPrevBtn = currentSlider.querySelector("[data-slider-prev]");
	  const sliderNextBtn = currentSlider.querySelector("[data-slider-next]");

	  let totalSliderVisibleItems = Number(getComputedStyle(currentSlider).getPropertyValue("--slider-items"));
	  let totalSlidableItems = sliderContainer.childElementCount - totalSliderVisibleItems;

	  let currentSlidePos = 0;

	  const moveSliderItem = function () {
		sliderContainer.style.transform = `translateX(-${sliderContainer.children[currentSlidePos].offsetLeft}px)`;
	  }

	  /**
	   * NEXT SLIDE
	   */
	  const slideNext = function () {
		const slideEnd = currentSlidePos >= totalSlidableItems;

		if (slideEnd) {
		  currentSlidePos = 0;
		} else {
		  currentSlidePos++;
		}

		moveSliderItem();
	  }

	  sliderNextBtn.addEventListener("click", slideNext);

	  /**
	   * PREVIOUS SLIDE
	   */
	  const slidePrev = function () {
		if (currentSlidePos <= 0) {
		  currentSlidePos = totalSlidableItems;
		} else {
		  currentSlidePos--;
		}

		moveSliderItem();
	  }

	  sliderPrevBtn.addEventListener("click", slidePrev);

	  const dontHaveExtraItem = totalSlidableItems <= 0;
	  if (dontHaveExtraItem) {
		sliderNextBtn.style.display = 'none';
		sliderPrevBtn.style.display = 'none';
	  }

	  /**
	   * slide with [shift + mouse wheel]
	   */

	  currentSlider.addEventListener("wheel", function (event) {
		if (event.shiftKey && event.deltaY > 0) slideNext();
		if (event.shiftKey && event.deltaY < 0) slidePrev();
	  });

	  /**
	   * RESPONSIVE
	   */

	  window.removeEventListener("resize", resize);
	  window.addEventListener("resize", resize);

	}

	for (let i = 0, len = sliders.length; i < len; i++) { initSlider(sliders[i]); }
}

init();

function pfolioAfterPageLoad() {
	if(document.querySelector("[data-v-component-product]")) {
		productPage();
	}
	
	if(document.querySelector("[data-v-cart-page]")) {
		//cartPage();
	}
	//get navbar for sticky
	navbar = document.getElementsByClassName("navbar")[0];

	init();
	preloaderFn();
}

window.VvvebTheme = window.VvvebTheme ?? {ajax:{}};
window.VvvebApp = window.VvvebApp ?? {};
VvvebTheme.ajax.afterLoad  = pfolioAfterPageLoad;

