//////////////////////////
// Slick
//////////////////////////

let breakPoints = [
  {
    breakpoint: 992,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 3,
      rows: 1,
      slidesPerRow: 1
    }
  },
  {
    breakpoint: 769,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 2,
      rows: 1,
      slidesPerRow: 1
    }
  },
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      rows: 1,
      slidesPerRow: 1
    }
  }
]

let breakPoints3of4 = [
  {
    breakpoint: 992,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 2
    }
  },
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false
    }
  }
]

const carouselSlickOnMobileCol1 = Object.create(B2C.slick)
const bannerSlick = Object.create(B2C.slick)
const carouselSlick = Object.create(B2C.slick)
const carouselSlickCol3 = Object.create(B2C.slick)
const carouselSlickCol34 = Object.create(B2C.slick)
const carouselSlickRow2 = Object.create(B2C.slick)
const carouselSlickRow2Xs = Object.create(B2C.slick)
const carouselSlickRow2Col4 = Object.create(B2C.slick)
const productFeatureSlick = Object.create(B2C.slick)
const blogSlick = Object.create(B2C.slick)
const carouselSlickOnMobileOnly = Object.create(B2C.slick)
// const defaultSlick = Object.create(B2C.slick)
const brandSlick = Object.create(B2C.slick)

// defaultSlick.init()

bannerSlick.init({
  target: ".js-banner-slick",
  config: {
    infinite: true,
    dots: true,
    arrows: false
  }
})

// 4 columns
carouselSlick.init({
  target: ".js-carousel-slick",
  config: {
    slidesToShow: 4,
    slidesToScroll: 4,
    dots: false,
    infinite: true,
    responsive: breakPoints,
    autoplay: false
  }
})

// 3 columns
carouselSlickCol3.init({
  target: ".js-carousel-slick-col-3",
  config: {
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: false,
    responsive: breakPoints,
    autoplay: false
  }
})

// 3 columns in desktop and mobile
carouselSlickCol34.init({
  target: ".js-carousel-slick-col-3-4",
  config: {
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: false,
    responsive: breakPoints3of4,
    autoplay: false
  }
})

productFeatureSlick.init({
  target: ".js-product-feature-slick",
  config: {
    dots: false,
    infinite: false
  }
})

// 2 Rows
carouselSlickRow2.init({
  target: ".js-carousel-slick-row-2",
  config: {
    slidesToShow: 4,
    slidesToScroll: 4,
    dots: false,
    rows: 2,
    slidesPerRow: 1,
    responsive: breakPoints
  }
})

// 2 Row Slider on Mobile
carouselSlickRow2Xs.init({
  target: ".js-carousel-slick-row-2-xs",
  config: {
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    rows: 2,
    mobileFirst: true,
    slidesPerRow: 1,
    responsive: [
      {
        breakpoint: 769,
        settings: "unslick"
      }
    ]
  }
})

carouselSlickRow2Col4.init({
  target: ".js-carousel-slick-row-2-col-4",
  config: {
    slidesToShow: 4,
    slidesToScroll: 1,
    dots: false,
    rows: 2,
    slidesPerRow: 1,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  }
})

// slick only on mobile | 1 column
carouselSlickOnMobileCol1.init({
  target: ".js-carousel-init-on-mobile-col-1",
  config: {
    dots: false,
    rows: 2,
    slidesPerRow: 4,
    arrows: false,
    autoplay: false,
    responsive: [
      {
        breakpoint: 992,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          rows: 1,
          slidesPerRow: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          rows: 1,
          slidesPerRow: 1
        }
      }
    ]
  }
})

// slick only on mobile only
carouselSlickOnMobileOnly.init({
  target: ".js-carousel-init-mobile-only",
  config: {
    mobileFirst: true,
    responsive: [
      {
        breakpoint: 768,
        settings: "unslick"
      }
    ]
  }
})

// Blog
blogSlick.init({
  target: ".js-carousel-slick-blog",
  config: {
    slidesToShow: 4,
    slidesToScroll: 4,
    dots: false,
    arrows: false,
    infinite: true,
    responsive: breakPoints,
    autoplay: false
  }
})

// List of Brand Slick
brandSlick.init({
  target: ".js-brand-slick",
  config: {
    dots: false,
    arrows: true,
    autoplay: false
  }
})
