'use strict';


function init() {
	/**
	 * PRELOADER
	 */

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

	window.addEventListener("DOMContentLoaded", function () {
	  preloader.classList.add("loaded");
	  document.body.classList.add("loaded");
	});



	/**
	 * add event on multiple elements
	 */

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



	/**
	 * Mobile navbar toggle
	 */

	const navbarHeader = document.querySelector("[data-navbar]");
	const navTogglers = document.querySelectorAll("[data-nav-toggler]");
	const navLinks = document.querySelectorAll(".navbar-link");
	const overlay = document.querySelector("[data-overlay]");

	addEventOnElements(navTogglers, "click", function () {
	  navbarHeader.classList.toggle("active");
	  overlay.classList.toggle("active");
	  document.body.classList.toggle("nav-active");
	});

	addEventOnElements(navLinks, "click", function () {
	  navbarHeader.classList.remove("active");
	  overlay.classList.remove("active");
	  document.body.classList.remove("nav-active");
	});



	/**
	 * Header active
	 */

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

	window.addEventListener("scroll", function () {
	  header.classList[window.scrollY > 100 ? "add" : "remove"]("active");
	});



	/**
	 * Element tilt effect
	 */

	const tiltElements = document.querySelectorAll("[data-tilt]");

	const initTilt = function (event) {

	  /** get tilt element center position */
	  const centerX = this.offsetWidth / 2;
	  const centerY = this.offsetHeight / 2;

	  const tiltPosY = ((event.offsetX - centerX) / centerX) * 10;
	  const tiltPosX = ((event.offsetY - centerY) / centerY) * 10;

	  this.style.transform = `perspective(1000px) rotateX(${tiltPosX}deg) rotateY(${tiltPosY - (tiltPosY * 2)}deg)`;

	}

	addEventOnElements(tiltElements, "mousemove", initTilt);

	addEventOnElements(tiltElements, "mouseout", function () {
	  this.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;
	});



	/**
	 * Tab content
	 */

	const tabBtns = document.querySelectorAll("[data-tab-btn]");
	const tabContents = document.querySelectorAll("[data-tab-content]");

	let lastActiveTabBtn = tabBtns[0];
	let lastActiveTabContent = tabContents[0];

	const filterContent = function () {

	  if (!(lastActiveTabBtn === this)) {

		lastActiveTabBtn.classList.remove("active");
		lastActiveTabContent.classList.remove("active");

		this.classList.add("active");
		lastActiveTabBtn = this;

		const currentTabContent = document.querySelector(`[data-tab-content="${this.dataset.tabBtn}"]`);

		currentTabContent.classList.add("active");
		lastActiveTabContent = currentTabContent;

	  }

	}

	addEventOnElements(tabBtns, "click", filterContent);



	/**
	 * Custom cursor
	 */

	const cursors = document.querySelectorAll("[data-cursor]");
	const hoveredElements = [...document.querySelectorAll("button"), ...document.querySelectorAll("a")];

	window.addEventListener("mousemove", function (event) {

	  const posX = event.clientX;
	  const posY = event.clientY;

	  /** cursor dot position */
	  cursors[0].style.left = `${posX}px`;
	  cursors[0].style.top = `${posY}px`;

	  /** cursor outline position */
	  setTimeout(function () {
		cursors[1].style.left = `${posX}px`;
		cursors[1].style.top = `${posY}px`;
	  }, 80);

	});

	/** add hovered class when mouseover on hoverElements */
	addEventOnElements(hoveredElements, "mouseover", function () {
	  for (let i = 0, len = cursors.length; i < len; i++) {
		cursors[i].classList.add("hovered");
	  }
	});

	/** remove hovered class when mouseout on hoverElements */
	addEventOnElements(hoveredElements, "mouseout", function () {
	  for (let i = 0, len = cursors.length; i < len; i++) {
		cursors[i].classList.remove("hovered");
	  }
	});

}

init();

function drewAfterPageLoad() {
	//check if product page to add specific listners
	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();
	const preloader = document.querySelector("[data-preloader]");
	document.body.classList.add("loaded");
	preloader.classList.add("loaded");
}

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