(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.usgs_carousel = {
    attach: function (context) {

      // We need different classes for arrows in case there's more than one carousel
      $('.hp-arrows').each(function(key, item) {
        var leftArrow = 'arrow-left-' + key;
        $(this).find('.c-left').addClass(leftArrow);

        var rightArrow = 'arrow-right-' + key;
        $(this).find('.c-right').addClass(rightArrow);
      });

      $('.hp-carousel').each(function(key, item) {

        var sliderIdName = 'hp-carousel-' + key;
        this.id = sliderIdName;
        $('#hp-carousel-'+key).slick({
          dots: false,
          autoplay: false,
          infinite: false,
          speed: 300,
          slidesToShow: 4.5,
          prevArrow: $('.arrow-left-'+key),
          nextArrow: $('.arrow-right-'+key),
          responsive: [
            {
              breakpoint: 1490,
              settings: {
                slidesToShow: 3.5
              }
            },
            {
              breakpoint: 1050,
              settings: {
                slidesToShow: 2.5
              }
            },
            {
              breakpoint: 750,
              settings: {
                slidesToShow: 1.5
              }
            },
            {
              breakpoint: 400,
              settings: {
                slidesToShow: 1
              }
            }
          ]
        });

      });

      $(context).find('.usgs-carousel').once('usgs-carousel').each(function() {
        var $multiple = $(this).find('.paragraph--type--carousel-item').length > 1;
        $(this).slick({
          dots: $multiple,
          arrows: false,
          slidesToShow: 1,
          autoplay: true,
          autoplaySpeed: 8000,
        }).show();
      });
      $('.carousel-prev').click(function(event) {
        $(this).parents('.carousel-arrows').siblings('.usgs-carousel').slick('slickPrev');
      });

      $('.carousel-next').click(function(event) {
        $(this).parents('.carousel-arrows').siblings('.usgs-carousel').slick('slickNext');
      });
    }
  }

})(jQuery, Drupal);
