// Disable Scroll Script
var Webflow = Webflow || [];
var $body = $(document.body);

Webflow.push(function () {
  $("[scroll=disable]").on("click", function () {
    $body.css("overflow", "hidden");
  });
  $("[scroll=enable]").on("click", function () {
    if ($body.css("overflow") != "hidden") {
      scrollPosition = window.pageYOffset;
    }
    $body.css("overflow", "");
  });
  $("[scroll=both]").on("click", function () {
    if ($body.css("overflow") != "hidden") {
      $body.css("overflow", "hidden");
    } else {
      $body.css("overflow", "");
    }
  });
});

// ACCESSIBILITY – skip to main content
$(document).ready(function () {
  $("#skip-link").on("click keydown", function (e) {
    if (e.type === "keydown" && e.which !== 13) {
      return;
    }

    e.preventDefault();
    var target = $("main");
    target.attr("tabindex", "-1");
    target.focus();
  });
});

// COLOR MODAL: PAGE TRANSITION COLOR PICKER
const colorItemLink = document.querySelectorAll(".filter-color-field");
if (colorItemLink.length > 0) {
  colorItemLink.forEach(function (element) {
    element.style.pointerEvents = "none"; // Prevent hover

    element.addEventListener("click", function (e) {
      var parent = this.parentElement;
      let scaleProperty = window.innerWidth <= 767 ? "scaleY" : "scaleX";

      Array.from(parent.parentElement.children).forEach(function (sibling) {
        if (sibling !== parent) {
          gsap.to(sibling, {
            [scaleProperty]: 0,
            duration: 0.3,
            ease: "power2.inOut",
          });
        }
      });

      e.preventDefault();

      setTimeout(
        function (url) {
          window.location = url;
        },
        900,
        this.href
      );
    });
  });
}

// Open & Close Color Modal Animation
var openColorsTL = gsap.timeline({
  paused: true,
  onComplete: function () {
    colorItemLink.forEach(function (element) {
      element.style.pointerEvents = "auto"; // Allow hover
    });
  },
});

if (colorItemLink.length > 0) {
  openColorsTL.set(".filter-modal-colors", { display: "flex" });

  if (window.innerWidth < 992) {
    // Viewport is smaller than 992px, scale Y
    openColorsTL.from(
      ".filter-color-collection-item",
      { scaleY: 0, duration: 0.2, stagger: 0.05 },
      "<"
    );
  } else {
    // Viewport is 992px or larger, scale X
    openColorsTL.from(
      ".filter-color-collection-item",
      { scaleX: 0, duration: 0.2, stagger: 0.05 },
      "<"
    );
  }

  // Close button fade-in animation
  openColorsTL.from(
    ".filter-modal-close.is--colors",
    { opacity: 0, duration: 0.3 },
    "<0.2"
  );

  var colorModalIsOpen = false;

  document.querySelectorAll("[tf-nav-color-btn]").forEach(function (button) {
    button.addEventListener("click", function () {
      if (colorModalIsOpen) {
        openColorsTL.reverse();
        colorModalIsOpen = false;
      } else {
        openColorsTL.play();
        colorModalIsOpen = true;
      }
    });
  });

  document
    .querySelectorAll("[tf-color-modal-trigger-close]")
    .forEach(function (closeButton) {
      closeButton.addEventListener("click", function () {
        if (colorModalIsOpen) {
          openColorsTL.reverse();
          colorModalIsOpen = false;
        }
      });
    });

  // Close when hitting ESC
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && colorModalIsOpen) {
      openColorsTL.reverse();
      colorModalIsOpen = false;
    }
  });
}