// -------------- AUTH triggers -------------

const authForms = new Map();

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("[data-auth-form]").forEach((root) => {
    const instance = initAuthForm(root);
    authForms.set(instance.name, instance);
  });

  if (getCookie("extra_metadata")) {
    return;
  }

  document
    .querySelectorAll("a[href*='app.essayservice.com/auth/']")
    .forEach(function (button) {
      button.addEventListener("click", function (event) {
        const form = authForms.get("slider");
        if (!form) return;

        loadRecaptcha();

        const buttonText = this.textContent.trim();
        const isLogin = buttonText.toLowerCase() === "log in";

        form.open(isLogin ? 0 : 1);
        setTimeout(initSlider, 100);

        window.dataLayer.push({
          event: "auth_modal_open",
          click_text: buttonText,
        });
      });
    });
});

// -------------- AUTH slider -------------

let sliderInstance = null;

function initSlider() {
  sliderInstance?.destroy();

  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const slides = [...document.querySelectorAll(".modal__slider-slide")];
  const dots = [...document.querySelectorAll(".modal__slider-btn")];
  const slider = document.querySelector(".modal__slider");

  if (!slides.length || !dots.length || !slider) return;

  let current = 0;
  let timer = null;

  const DURATION = 4000;
  const SWIPE_DISTANCE = 50;

  let autoplay = !reduce;

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.toggle("active", i === index);
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle("active", i === index);

      const progress = dot.querySelector(".modal__slider-progress");
      if (!progress) return;

      progress.style.transition = "none";
      progress.style.width = "0%";

      if (i === index && autoplay) {
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            progress.style.transition = `width ${DURATION}ms linear`;
            progress.style.width = "100%";
          });
        });
      } else if (i === index && !autoplay) {
        progress.style.width = "100%";
      }
    });

    current = index;
  }

  function schedule() {
    clearTimeout(timer);

    if (!autoplay) return;

    timer = setTimeout(next, DURATION);
  }

  function next() {
    showSlide((current + 1) % slides.length);
    schedule();
  }

  function prev() {
    showSlide((current - 1 + slides.length) % slides.length);
    schedule();
  }

  function stopAutoplay() {
    autoplay = false;
    clearTimeout(timer);
  }

  const handlers = [];

  dots.forEach((dot, index) => {
    const handler = () => {
      stopAutoplay();
      showSlide(index);
    };

    dot.addEventListener("click", handler);
    handlers.push({ dot, handler });
  });

  const isTouchDevice = window.matchMedia("(pointer: coarse)").matches;

  let startX = 0;
  let startY = 0;
  let isSwiping = false;

  function onPointerDown(e) {
    if (!isTouchDevice || e.pointerType !== "touch") return;

    slider.setPointerCapture(e.pointerId);

    startX = e.clientX;
    startY = e.clientY;
    isSwiping = true;
  }

  function onPointerUp(e) {
    if (!isSwiping || !isTouchDevice || e.pointerType !== "touch") return;

    isSwiping = false;

    const diffX = e.clientX - startX;
    const diffY = e.clientY - startY;

    if (Math.abs(diffY) > Math.abs(diffX)) return;
    if (Math.abs(diffX) < SWIPE_DISTANCE) return;

    stopAutoplay();

    if (diffX < 0) {
      next();
    } else {
      prev();
    }
  }

  function onPointerCancel() {
    isSwiping = false;
  }

  if (isTouchDevice) {
    slider.addEventListener("pointerdown", onPointerDown);
    slider.addEventListener("pointerup", onPointerUp);
    slider.addEventListener("pointercancel", onPointerCancel);
  }

  showSlide(0);
  schedule();

  sliderInstance = {
    destroy() {
      clearTimeout(timer);

      handlers.forEach(({ dot, handler }) => {
        dot.removeEventListener("click", handler);
      });

      if (isTouchDevice) {
        slider.removeEventListener("pointerdown", onPointerDown);
        slider.removeEventListener("pointerup", onPointerUp);
        slider.removeEventListener("pointercancel", onPointerCancel);
      }

      slides.forEach((slide) => {
        slide.classList.remove("active");
      });

      dots.forEach((dot) => {
        dot.classList.remove("active");

        const progress = dot.querySelector(".modal__slider-progress");
        if (!progress) return;

        progress.style.transition = "none";
        progress.style.width = "0%";
      });
    },
  };

  return sliderInstance;
}