// Cart Modal (Empty cart)

$(".cart-mini-exit-wrap").on("click", function () {
  $(".cart-mini-wrapper").click();
});

// Cart overflow hidden

let cartWrap = document.querySelector(".cart-mini-wrapper");

const observer = new MutationObserver((overflow) => {
  if (cartWrap.style.opacity == 1) {
    document.body.classList.add("overflow-hidden");
  } else {
    document.body.classList.remove("overflow-hidden");
  }
});

observer.observe(cartWrap, {
  attributes: true,
  attributeFilter: ["style"],
});

// Dropdown Defaults

$(".panel-left-block.learn-more").eq(0).addClass("active-learn");
$(".panel-menu-block.learn-more").eq(0).addClass("active-learn");
$(".panel-menu-block.learn-more")
  .eq(0)
  .find(".panel-circle")
  .addClass("active-learn");
  
// Allow Zooming for Accessibility per https://timothyricks.notion.site/Wizardry-Allow-Zooming-for-Accessibility-04e95fcf25d048c08ef6a45d7c148c71
let zoomLevel = Math.round((window.devicePixelRatio * 100) / 2);
function checkZoomLevel() {
  if (zoomLevel > 100) {
    $("body").addClass("user-font-size");
  } else {
    $("body").removeClass("user-font-size");
  }
}
checkZoomLevel();
$(window).resize(function () {
  zoomLevel = Math.round((window.devicePixelRatio * 100) / 2);
  checkZoomLevel();
});

/// Quantity Buttons

$(document).on("click", ".atc-quantity-button.increase", function () {
  var $input = $(this).closest(".atc-quantity-wrap").find(".atc-quantity");
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
  $input[0].dispatchEvent(new Event("change", { bubbles: true }));
});

$(document).on("click", ".atc-quantity-button.decrease", function () {
  var $input = $(this).closest(".atc-quantity-wrap").find(".atc-quantity");
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
  $input[0].dispatchEvent(new Event("change", { bubbles: true }));
});

/// Swiper Influencers

const footerSlide = new Swiper(".footer-slider", {
  // Optional parameters
  wrapperClass: "footer-slider-list",
  slideClass: "footer-slider-slide",
  direction: "horizontal",
  loop: true,
  allowTouchMove: true,
  grabCursor: true,
  simulateTouch: true,
  slidesPerView: "auto",
  speed: 1000,
  momentum: true,
  momentumBounce: true,
  momentumRatio: 1,
  centeredSlides: false,

  // If we need pagination
  pagination: {
    el: ".swiper-pagination.is--2",
  },

  // Navigation arrows
  navigation: {
    nextEl: ".arrow-next.footer",
    prevEl: ".arrow-prev.footer",
  },
});





if (window.innerWidth > 992) {


  // Hover in Learn More

  $(".menu-wrap.learn-more .panel-menu-block").on("mouseenter", function () {
    $(".active-learn").removeClass("active-learn");
    $(this).addClass("active-learn");
    let menuLinkIndex = $(this).index();
    $(this).find(".panel-circle").addClass("active-learn");
    $(".menu-wrap.learn-more .panel-left-block")
      .eq(menuLinkIndex)
      .addClass("active-learn");
  });

}

//  if (window.innerWidth < 991) {

let mmMain = gsap.matchMedia();

mmMain.add("(max-width: 991px)", () => {
  
  /// ~ MOBILE TABS

  const menuTab = document.querySelector(".menu-tab");
  const menuPane = document.querySelector(".menu");

  const shopTab = document.querySelector(".shop-tab");
  const shopPane = document.querySelector(".shop");

  const tabBg = document.querySelector(".tab-bg");

  // Menu Opens
  const menuOpen = gsap
    .timeline({ reversed: true })

    .set("body", { overflow: "hidden", duration: 0.01 })
    .set(".tab-bg", {
      height: "100vh",
      zIndex: 1,
      opacity: 1,
      duration: 0.1,
    })

    .to(".menu-pane", {
      height: "auto",
      duration: 0.1,
    })

    .to(".menu", {
      bottom: "70%",
      height: "auto",
      opacity: 1,
      duration: 0.4,
      ease: "power3.out",
    })
    .to(
      ".menu-block",
      {
        y: "0em",
        opacity: 1,
        stagger: { amount: 0.5 },
        duration: 0.4,
        ease: "power3.out",
      },
      "<+0.3"
    )
    .to(
      ".menu-tab",
      {
        backgroundColor: "#055b63",
        color: "#ffff",
        duration: 0.2,
        ease: "power3.out",
      },
      "<"
    );

  // Shop Opens

  const shopOpen = gsap
    .timeline({ reversed: true })

    .set("body", { overflow: "hidden", duration: 0.01 })
    .set(".tab-bg", {
      height: "100vh",
      zIndex: 1,
      opacity: 1,
      duration: 0.1,
    })

    .to(".shop-pane", {
      height: "auto",
      duration: 0.1,
    })

    .to(".shop", {
      bottom: "70%",
      height: "auto",
      opacity: 1,
      duration: 0.4,
      ease: "power3.out",
    })
    .to(
      ".shop-block",
      {
        y: "0em",
        opacity: 1,
        stagger: { amount: 0.5 },
        duration: 0.4,
        ease: "power3.out",
      },
      "<+0.3"
    )
    .to(
      ".shop-tab",
      {
        backgroundColor: "#055b63",
        color: "#ffff",
        duration: 0.2,
        ease: "power3.out",
      },
      "<"
    );

  menuOpen.paused(true);
  shopOpen.paused(true);

  // Menu Tab Click

  menuTab.addEventListener("click", menu);

  // Shop Tab Click

  shopTab.addEventListener("click", shop);

  // Background Exit Tab

  tabBg.addEventListener("click", () => {
    menuOpen.reverse(0.4);
    shopOpen.reverse(0.4);
  });

  async function shop() {
    await Promise.all([menuOpen.timeScale(2).reverse()]);

    shopOpen.reversed() ? shopOpen.play() : shopOpen.reverse(0.4);
  }

  async function menu() {
    await Promise.all([shopOpen.timeScale(2).reverse()]);

    menuOpen.reversed() ? menuOpen.play() : menuOpen.reverse();
  }
});

/// ~ Desktop & Mobile Navigation Menu

const showAnim = gsap
  .from(".floating-tabs", {
    bottom: "-20%",
    paused: true,
    duration: 0.4,
    ease: "power3.out",
  })
  .progress(1);

const showNav = gsap
  .from(".navigation", {
    top: "-20%",
    paused: true,
    duration: 0.4,
    ease: "power3.out",
  })
  .progress(1);

ScrollTrigger.create({
  start: "top top",
  end: 99999,
  onUpdate: (self) => {
    self.direction === -1 ? showAnim.play() : showAnim.reverse();
    self.direction === -1 ? showNav.play() : showNav.reverse();
  },
});

// Showing Arrows On Hover
if (window.innerWidth > 990) {
  $(".product-block_top").on("mouseenter mouseleave", function () {
    $(this).find(".prod-block_pagination").toggleClass("hover-in");
    $(this).find(".product-block_arrow").toggleClass("hover-in");
  });
} else {
  $(".prod-block_pagination").removeClass("hover-in");
  $(".product-block_arrow").removeClass("hover-in");
}

tippy(".tooltip", {
  animation: "fade",
  duration: 200,
  zIndex: 900,
  arrow: true,
  delay: [0, 50],
  arrowType: "sharp",
  theme: "light",
  maxWidth: 220,
  interactive: true,
});