// READY FUNCTIONS
$(document).ready(function () {
  homepageHandler();
  globalHandler();
})

// GLOBAL FUNCTIONS
function globalHandler() {
  swiperProductThumbs();
}

function viewMoreContent(target) {
  let htmlStaticBlock = $(target).find(".static-html");
  let viewMoreBtn = $(target).find(".js-view-more-content");

  htmlStaticBlock.toggleClass("max-height-none").toggleClass("blur");
  viewMoreBtn.html().trim() === "Xem thêm +" ? viewMoreBtn.html("Thu gọn -") : viewMoreBtn.html("Xem thêm +");
  if (!$(".static-html").hasClass("max-height-none")) document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
}

function swiperProductThumbs() {
  new Swiper(".swiper-product-thumbs", {
    slidesPerView: 1,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    breakpoints: {
      1600: {
        spaceBetween: 16,
      },
    },
  });
}

// HOMEAPGE FUNCTIONS
function homepageHandler() {
  swiperSectionHero();
  swiperSectionHomepageBanner();
}

function swiperSectionHero() {
  new Swiper(".swiper-section-hero", {
    slidesPerView: 1,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    breakpoints: {
      1600: {
        spaceBetween: 16,
      },
    },
  });
}

function swiperSectionHomepageBanner() {
  new Swiper(".swiper-section-homepage-banner", {
    slidesPerView: 2,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    breakpoints: {
      1600: {
        spaceBetween: 16,
      },
    },
  });
}

// PRODUCT DETAIL
function detailHandler() {

}

let galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 12,
  slidesPerView: 4,
  slideToClickedSlide: true,
  freeMode: true,
  watchSlidesProgress: true,
  centerInsufficientSlides: true,
  breakpoints: {
    1600: {
      spaceBetween: 16,
    },
  },
});

let galleryTop = new Swiper(".gallery-top", {
  spaceBetween: 12,
  slidesPerView: 1,
  speed: 1000,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
    pauseOnMouseEnter: "true",
  },
  breakpoints: {
    1600: {
      spaceBetween: 16,
    },
  },
  thumbs: {
    swiper: galleryThumbs,
  },
  // AUTO SILDED AT FISRT AND END
  on: {
    slideChange: function () {
      let activeIndex = this.activeIndex + 1;

      let activeSlide = document.querySelector(
        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
      );
      let nextSlide = document.querySelector(
        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
      );
      let prevSlide = document.querySelector(
        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
      );

      if (
        nextSlide &&
        !nextSlide.classList.contains("swiper-slide-visible")
      ) {
        this.thumbs.swiper.slideNext();
      } else if (
        prevSlide &&
        !prevSlide.classList.contains("swiper-slide-visible")
      ) {
        this.thumbs.swiper.slidePrev();
      }
    },
  },
});

$('[data-fancybox="gallery"]').fancybox({
  thumbs: {
    autoStart: true
  }
});

function toggleAttr(target, _this) {
  $('[data-type="attr-item-content"]').addClass('d-none');
  $(target).toggleClass('d-none');
  $(_this).closest('.attr-list-name').find('.title').removeClass('active');
  $(_this).addClass('active');
}

// CART
function cartHandler() {

}

function toggleDisplay(target) {
  $(target).toggleClass('d-none');
}