/*
==============================================================
*/
// SWIPER PASEK
class IdmSwiperProgress {
  constructor(swiper, selector) {
    this.swiper = swiper?.slider?.slider ?? swiper?.slider ?? swiper;
    this.selector = selector;
    this.scrollbarEl = null;
    this.progressEl = null;
    this.isDragging = false;

    this.init();
  }

  init() {
    const el = document.querySelector(this.selector);
    if (!el || el.querySelector(".idm-scrollbar")) return;

    el.insertAdjacentHTML(
      "beforeend",
      `<div class="idm-scrollbar swiper-scrollbar"><div class="idm-progress"></div></div>`
    );

    this.scrollbarEl = el.querySelector(".idm-scrollbar");
    this.progressEl = this.scrollbarEl.querySelector(".idm-progress");

    this.updateBarWidth();
    this.addDragTracking();

    this.swiper.on("progress", () => this.updateProgress());
    this.swiper.on("breakpoint", () => {this.updateBarWidth()});
  }

  updateBarWidth() {
    const { slidesPerGroup, slidesPerView } = this.swiper.params;
    const totalSlides = this.swiper.slides.length;

    const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
    this.progressEl.style.width = `${progressWidth}%`;

    if (progressWidth >= 100 || progressWidth <= 0) this.scrollbarEl.style.display = "none";
    else this.scrollbarEl.style.display = "";
  }

  updateProgress() {
    const progress = this.swiper.progress;
    const { slidesPerGroup, slidesPerView } = this.swiper.params;
    const totalSlides = this.swiper.slides.length;

    const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
    const newLeft = (100 - progressWidth) * progress;
    this.progressEl.style.left = `${Math.min(
      100 - progressWidth,
      Math.max(0, newLeft)
    )}%`;
  }

  addDragTracking() {
    const handle = this.progressEl;
    let grabOffset = 0;
    let scrollbarWidth = 0;
    let handleWidth = 0;

    const startDrag = (e) => {
      this.isDragging = true;
      this.scrollbarEl.classList.add("--drag-start");

      const rect = this.scrollbarEl.getBoundingClientRect();
      const handleRect = handle.getBoundingClientRect();
      scrollbarWidth = rect.width;
      handleWidth = handleRect.width;

      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      grabOffset = clientX - handleRect.left;

      document.addEventListener("mousemove", handleDrag);
      document.addEventListener("mouseup", stopDrag);
      document.addEventListener("touchmove", handleDrag);
      document.addEventListener("touchend", stopDrag);
    };

    const handleDrag = (e) => {
      if (!this.isDragging) return;
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const rect = this.scrollbarEl.getBoundingClientRect();
      let newLeftPx = clientX - rect.left - grabOffset;
      const maxLeft = scrollbarWidth - handleWidth;
      newLeftPx = Math.max(0, Math.min(maxLeft, newLeftPx));
      const progress = newLeftPx / maxLeft;
      this.swiper.setProgress(progress, 0);
    };

    const stopDrag = () => {
      if (!this.isDragging) return;
      this.isDragging = false;
      document.removeEventListener("mousemove", handleDrag);
      document.removeEventListener("mouseup", stopDrag);
      document.removeEventListener("touchmove", handleDrag);
      document.removeEventListener("touchend", stopDrag);
      this.scrollbarEl.classList.remove("--drag-start");
      this.swiper.slideReset(400);
    };

    handle.addEventListener("mousedown", startDrag);
    handle.addEventListener("touchstart", startDrag);
  }
}