// Category
$(".dropdown-filter").on("click", function () {
  $(this).toggleClass("show");
});

// General
$("select").addClass("select form-control");
$(
  "form input[type='tel'], form input[type='password'], form input[type='number'],form input[type='text'], form input[type='email'], form input[type='date'], form textarea",
).addClass("form-control");
$("input.invalid").addClass("is-invalid");

// Pagination
$(".pager").addClass("pagination justify-content-center");
$(".pagination li").addClass("page-item");
$(".pagination li a").addClass("page-link");
$(".pagination").removeClass("pager");
$(".pagination").wrapAll("<nav>");

// Customer
$("#credentials_email").wrapAll('<div class="form-group">');
$(
  "#customer_details #customer_contacts, #customer_details #customer_additional_fields, #customer_details #customer_details_password, #customer_details .actions",
).wrapAll('<div class="card"><div class="card-body">');

// Blog post
$(".page-body figure iframe").parent("figure").addClass("videoWrapper");
$(".page-body table, .description table").addClass("table table-bordered");

// Cart
$("#coupon_code").addClass("form-control").wrapAll('<div class="form-group">');
$("#coupon_form label").addClass("alert w-100 mt-2 small");
$("#coupon_form .success").addClass("alert-success");
$("#coupon_form .warning").addClass("alert-warning");
$("#coupon_form .error").addClass("alert-danger");
$("#estimate_shipping_form > label:nth-child(1), #estimate_shipping_country").wrapAll('<div class="form-group arrow">');
$("#estimate_shipping_form > label:nth-child(2), #estimate_shipping_region").wrapAll('<div class="form-group arrow">');
$("#estimate_shipping_form > label:nth-child(3), #estimate_shipping_municipality").wrapAll(
  '<div class="form-group arrow">',
);
$("#estimate_shipping_form > label:nth-child(4), #estimate_shipping_postal").wrapAll('<div class="form-group">');

// Checkout
$("#contacts > div, #shipping_address > div, #billing_address > div, #other > div").addClass("field col-md-6");
$(".checkbox").removeClass("form-control");
$("#estimate_shipping_button, #set_shipping_button, #set_coupon_code_button").addClass("btn btn-secondary btn-block");
$(".actions .button").addClass("btn btn-primary btn-block mb-2");
$("#checkout .actions .button").addClass("btn btn-secondary");
$(".checkbox-field").addClass("checkbox");
$(".field label").addClass("control-label");
$("#checkout").wrapAll('<div class="card mb-3">');
$("#checkout #contacts, #checkout #shipping_address, #checkout #billing_address, #checkout #other").addClass(
  "p-md-4 p-3 border-bottom",
);
$("#checkout #contacts > div").wrapAll('<div class="row">');
$("#checkout #shipping_address > div").wrapAll('<div class="row">');
$("#checkout #billing_address > div").wrapAll('<div class="row">');
$("#checkout #other > div").wrapAll('<div class="row">');
$("#checkout p.required").insertAfter("#contacts h2");
$("#checkout .col-lg-8, #checkout .col-lg-4").wrapAll('<div class="row">');
$("#checkout #shipping_address_same_as_shipping").addClass("col-12");

$("#checkout #payments_options li, #checkout #shipping_options li").addClass("form-check pl-4");
$("#checkout #payments_options li > input, #checkout #shipping_options li > input ").addClass("form-check-input");
$("#checkout #payments_options li > label, #checkout #shipping_options li > label ").addClass("form-check-label");

$("#other_additional_information").removeClass("col-md-6");
$("#other_additional_information").addClass("col-12");
$("#payments, #shipping").wrapAll('<div class="p-md-4 p-3"><div class="row">');
$("#shipping").addClass("col-md-6");
$("#payments").addClass("col-md-6 mb-md-0 mb-4");
$("#checkout .checkbox-field").addClass("no-label");
$("#checkout #payments ul, #checkout #shipping ul").addClass("list-group m-0 p-0");
$("#checkout #payments ul li, #checkout #shipping ul li").addClass("list-group-item");

$("#shipping_address_same_as_shipping").removeClass("col-md-6");
$("#contacts_accepts_marketing").removeClass("col-md-6 no-label form-group");
$("#contacts_accepts_marketing").addClass("px-0 mt-2");
$("#contacts_accepts_marketing > input").removeClass("form-control");

// Success
$("#credentials_password").wrapAll('<div class="form-group">');
$("#credentials_password_confirmation").wrapAll('<div class="form-group">');

// Customer
$("#customer_address #shipping_address").addClass("row");
$("#customer_details #contacts_email").wrapAll('<div class="form-group">');
$("#customer_details #contacts_phone").wrapAll('<div class="form-group">');
$("#customer_details #details_password").wrapAll('<div class="form-group">');
$("#customer_details #details_confirm_password").wrapAll('<div class="form-group">');
$(".pending-payment").addClass("badge badge-warning mt-2");
$(".paid").addClass("badge badge-success");
$(".abandoned").addClass("badge badge-secondary");
$(".canceled").addClass("badge badge-danger");
$(".shipped").addClass("badge badge-primary");
$(
  "#address #shipping_address_name, #address #shipping_address_surname, #address #shipping_address_address, #address #shipping_address_taxid, #address #shipping_address_city, #address #shipping_address_postal, #address #shipping_address_country, #address #shipping_address_region, #address #billing_address_name, #address #billing_address_surname, #address #billing_address_address,#address #billing_address_taxid, #address #billing_address_city, #address #billing_address_postal, #address #billing_address_country, #address #billing_address_region,#customer_details_password > div",
).addClass("form-group ");
$("#customer_additional_fields > div").removeClass("col-md-6");

$("ul.nav > li.dropdown > ul > li").click(function (event) {
  // stop bootstrap.js to hide the parents
  event.stopPropagation();
  // hide the open children
  $(this).find("ul.nav > li.dropdown > ul > li").removeClass("open");
  // add 'open' class to all parents with class 'dropdown-submenu'
  $(this).parents("ul.nav > li.dropdown > ul > li").addClass("open");
  // this is also open (or was)
  $(this).toggleClass("open");
});

$("#main-menu .nav-item.dropdown, #main-menu .dropdown-menu.multi-level").hover(
  function () {
    $(this).addClass("sfhover");
  },
  function () {
    $(this).removeClass("sfhover");
  },
);

// --- Menu Mobile -- //
$(".menu-header .item-1 span").click(function () {
  $(".menu-header .item-1").toggleClass("active");
  $(".menu-header .item-2, .menu-header .item-3").removeClass("active");
});
$(".menu-header .item-2 span").click(function () {
  $(".menu-header .item-2").toggleClass("active");
  $(".menu-header .item-1, .menu-header .item-3").removeClass("active");
});
$(".menu-header .item-3 span").click(function () {
  $(".menu-header .item-3").toggleClass("active");
  $(".menu-header .item-1, .menu-header .item-2").removeClass("active");
});

// mobile menu
$(".menu-mobile li.has-dropdown a.first-trigger").click(function () {
  $(".menu-mobile").toggleClass("active");
  $(this).next().toggleClass("active");
});

// mobile menu - N levels down
$(".menu-mobile li.has-dropdown a.last-trigger").click(function () {
  $(".menu-mobile").toggleClass($(this).attr("class").split(" ").shift().toString());
  $(this).next().addClass("active");
});

// back button on mobile menu
$(".menu-mobile li.has-dropdown a.back-level-1").click(function () {
  $(".menu-mobile, ul.dropdown").removeClass("active");
});

// back to top mobile menu
$(".menu-mobile li.has-dropdown > a").click(function () {
  $(".mobilenav-inner").animate(
    {
      scrollTop: $(".menu-top").offset().top - 100,
    },
    10,
  );
});

// back button on mobile menu - N levels up
$(".menu-mobile li.has-dropdown a[class^='back-level-']").click(function () {
  const classesArray = $(this).attr("class").split("-");
  classesArray.shift();

  $(".menu-mobile").toggleClass(classesArray.join("-"));
  $("ul." + classesArray.join("-").toString() + ".dropdown").removeClass("active");
});

$(".nav-icon,.nav-bg-opacity").click(function () {
  $(".nav-icon").toggleClass("open");
  $(".mobilenav").toggleClass("open");
  $("body").toggleClass("menuopen");
});

// Product page
$("#product-page").each(function () {
  $(".bootstrap-filestyle .btn", this).append('<i class="ph ph-paperclip"></i>').addClass("btn-primary");

  $("#product-sharing a").on("click", function () {
    return !window.open(this.href, "Share", "width=640,height=300");
  });
  dynamicProductFormListener("#product-page");

  $(".product-gallery", this).each(function () {
    const enableZoom = $(this).attr("data-enable-zoom") === "true";
    if (enableZoom) $(".zoom", this).zoom();
  });
  addQuantityVerifyListener("#input-qty");
});

$("#product-link").click(function () {
  $(this).select();
});

// Single Product
$(".product-single-block").each(function () {
  dynamicProductFormListener(".product-single-block");
});

// Product page video listeners
(() => {
  // Get all of the videos
  const videos = document.querySelectorAll("[data-youtube]");
  // Progressively enhance them
  for (const video of videos) {
    // Get the video ID
    const id = new URL(video.href).searchParams.get("v");
    // Add the ID to the data-youtube attribute
    video.setAttribute("data-youtube", id);
    // Add a role of button
    video.setAttribute("role", "button");
    // Add a thumbnail
    video.innerHTML = `<img src="https://img.youtube.com/vi/${id}/maxresdefault.jpg"><br>${video.textContent}`;
  }

  /**
   * Handle click events on the video thumbnails
   * @param  {Event} event The event object
   */
  function clickHandler(event) {
    // Get the video link
    const link = event.target.closest("[data-youtube]");
    if (!link) return;
    // Prevent the URL from redirecting users
    event.preventDefault();
    // Get the video ID
    const id = link.getAttribute("data-youtube");
    // Create the player
    const player = document.createElement("div");
    player.innerHTML = `<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/${id}?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
    // Inject the player into the UI
    link.replaceWith(player);
  }

  // Detect clicks on the video thumbnails
  document.addEventListener("click", clickHandler);

  document.querySelectorAll(".lbl-toggle").forEach((label) => {
    label.addEventListener("keydown", (e) => {
      if (e.which === 32 || e.which === 13) {
        e.preventDefault();
        label.click();
      }
    });
  });
})();

// Category filter scripts
(() => {
  // Prevent default behavior of category_menu_trigger_child icon
  document.querySelectorAll("#side_filters a.category_menu_trigger_child i").forEach(function (icon) {
    icon.addEventListener("click", function (event) {
      event.preventDefault();
    });
  });

  // Toggle submenu and add/remove 'active' class on click
  document.querySelectorAll(".category_menu_trigger_child i").forEach(function (icon) {
    icon.addEventListener("click", function () {
      const submenu = this.parentElement.nextElementSibling;
      submenu.style.display = submenu.style.display === "block" ? "none" : "block";
      this.parentElement.classList.toggle("active");
    });
  });
})();

initializePriceFilters();
initializeFilterListeners();