jQuery(document).ready(function ($) {

  
  // Swiper Story
  const swiperStoryShop = $(".swiper-story-shop");

  if (swiperStoryShop.length > 0) {
    new Swiper(".swiper-story-shop", {
      autoHeight: true,
	  autoplay:true,
      slidesPerView: "auto",
      breakpoints: {
        320: {
          spaceBetween: 12,
        },
        992: {
          spaceBetween: 24,
        },
      },
      on: {
        init: (s) => s.update(),
      },
    });
  }

  let enabledVideo = "";

  // Swiper Story Items
  let swiperStoryItemsShopEl;

  const swiperStoryItemsShop = $(".swiper-story-items");

  if (swiperStoryItemsShop.length > 0) {
    swiperStoryItemsShopEl = new Swiper(".swiper-story-items", {
      slidesPerView: "auto",
      allowTouchMove: window.innerWidth > 767 ? false : true,
      allowSlideNext: window.innerWidth > 767 ? false : true,
      allowSlidePrev: window.innerWidth > 767 ? false : true,
      spaceBetween: 0,
      navigation: {
        nextEl: ".swiper-story-items .swiper-button-next",
        prevEl: ".swiper-story-items .swiper-button-prev",
      },
      on: {
        init: (s) => s.update(),
        slideChange: (s) => {
          if (enabledVideo !== "") {
            if (enabledVideo[0]?.tagName === "VIDEO") {
              enabledVideo[0]?.pause();
              enabledVideo[0].currentTime = 0;
              enabledVideo[0].muted = false;
              enabledVideo?.parent()?.removeClass("muted");
            }

            enabledVideo = $(s.slides[s.realIndex]).find("video");

            enabledVideo[0]?.tagName === "VIDEO" && enabledVideo[0].play();
          }
        },
      },
    });
  }

  // Swiper Products Story
  const swiperProductsStoryShop = $(".swiper-products-story");

  if (swiperProductsStoryShop.length > 0) {
    new Swiper(".swiper-products-story", {
      autoHeight: true,
      slidesPerView: 1.5,
      spaceBetween: 10,
      on: {
        init: (s) => s.update(),
      },
    });
  }

  $(document).mousemove((ev) => {
    const el = $(ev.target);

    if (
      el.closest(".story-shop__story__products").length > 0 ||
      el.closest(".video__box__control-bar").length > 0
    ) {
      swiperStoryItemsShopEl.allowTouchMove = false;
    } else {
      if (swiperStoryItemsShopEl) swiperStoryItemsShopEl.allowTouchMove = true;
    }
  });

  $(document).bind("touchstart", (ev) => {
    const el = $(ev.target);

    if (
      el.closest(".story-shop__story__products").length > 0 ||
      el.closest(".video__box__control-bar").length > 0
    ) {
      swiperStoryItemsShopEl.allowTouchMove = false;
    } else {
      if (swiperStoryItemsShopEl) swiperStoryItemsShopEl.allowTouchMove = true;
    }
  });

  $(".story-shop__item").click((ev) => {
    const indexStory = $(".story-shop__item").index(ev.currentTarget);

    swiperStoryItemsShopEl.slideTo(indexStory);

    enabledVideo = $(swiperStoryItemsShopEl.slides[indexStory]).find("video");

    enabledVideo[0]?.tagName === "VIDEO" && enabledVideo[0].play();
  });

  $(".story-shop__story .heading .modal-close").click(() => {
    if (enabledVideo[0]?.tagName === "VIDEO") {
      enabledVideo[0].pause();
      enabledVideo[0].currentTime = 0;
      enabledVideo[0].muted = false;
      enabledVideo?.parent()?.removeClass("muted");
    }
  });

  $(".video__box").each((index, box) => {
    const video = $(box).find("video")[0],
      progressEl = $(box).find(".video__box__control-bar__progress"),
      progressBarEl = $(progressEl).find("span"),
      currentTimeEl = $(box).find(".video__box__control-bar__current-time");

    $(video).click((ev) => {
      ev.preventDefault();

      $(box).toggleClass("muted");

      $(box).find("video")[0].muted = $(box).hasClass("muted") ? true : false;
    });

    let isDragging = false;

    setInterval(() => {
      const currentTime = Math.floor(video.currentTime),
        duration = Math.floor(video.duration);

      const minute =
          currentTime > 60
            ? (currentTime / 60).toString().padStart(2, "0")
            : "00",
        second = Math.floor(currentTime).toString().padStart(2, "0");

      progressBarEl.width((currentTime / duration) * 100 + "%");

      currentTimeEl.text(`${minute}:${second}`);
    }, 100);

    const setCurrentTime = (ev) => {
      const rect = progressEl[0].getBoundingClientRect(),
        offsetX = ev.touches
          ? ev.touches[0].clientX - rect.left
          : ev.clientX - rect.left,
        percentage = offsetX / rect.width;

      video.currentTime =
        Math.floor(video.duration) * Number(percentage.toFixed(1));
    };

    $(document).on("mousemove", (ev) => {
      if (ev.target.closest(".video__box__control-bar") === null) {
        isDragging = false;
      }

      if (isDragging) {
        setCurrentTime(ev);
      }
    });

    progressEl.click((ev) => setCurrentTime(ev));

    progressEl.on("touchstart", (ev) => setCurrentTime(ev));
    progressEl.on("touchmove", (ev) => {
      setCurrentTime(ev);
      ev.preventDefault();
    });

    progressEl.on("mousedown", (ev) => {
      isDragging = true;
      setCurrentTime(ev);
    });

    $(document).on("mouseup", () => (isDragging = false));
  });

  $(".send-comment-story__input").keyup((ev) => {
    const el = $(ev.target),
      value = el.val(),
      btn = $(".send-comment-story__btn");

    if (value !== "") {
      btn.removeClass("d-none");
    } else {
      btn.addClass("d-none");
    }
  });

  $(".btn-comments-story").click(() => {
    $("#modal-comments-story").modal("show");
  });

  $(".story-shop__story__product").click(() => {
    $("#modal-product-story").modal("show");
  });

  $(".content__text .description").click((ev) => {
    const el = $(ev.currentTarget);

    el.toggleClass("show");
  });

})