// Be aware that it is designed to work only in mobile-first settings.
// @see https://www.drupal.org/project/slick/issues/3309858#comment-14745795

// =============================================

// Slick Helper JS.
// When using Slick Module, Add an unslicked class to elements that have the unslicked setting.
// Then if it has been unslicked, reinitialize the slider.
// @see https://kenwheeler.github.io/slick/
(function ($) {
  $(window).on('load resize', function(e) {

    // Target is dedicated to pickups on the top page
    var slicks = $('.slick.slick--optionset--top-pick-up');

    slicks.each(function() {
      var slickWrapper = $(this),
        slickSlider = slickWrapper.find('.slick__slider'),
        slides = slickSlider.find('.slick__slide'),
        settings = slickSlider.attr('data-slick') ? JSON.parse(slickSlider.attr('data-slick')) : {},
        arrows = slickWrapper.find('.slick-arrow'),
        windowWidth = $(window).width(),
        unslicked = slickWrapper.hasClass('unslick'),
        isAutoPlay = settings ? settings.autoplay : false,
        wasUnslicked = slickWrapper.hasClass('unslicked'),
        slidesToShow = settings && settings.slidesToShow ? settings.slidesToShow : 1;

      slickWrapper.removeClass('unslicked');

      if (slickSlider.length === 0) {
        if (!slickWrapper.hasClass('unwrapped')) {
          slickWrapper.addClass('unwrapped');
        }
      } else {
        slickWrapper.removeClass('unwrapped');

        // Add slide change listener to keep tabindex 0 for all slides
        if (!slickSlider.hasClass('force-tabbable')) {
          slickSlider.addClass('force-tabbable');

          slickSlider.on('afterChange', function() {
            setTimeout(function() {
              slides.each(function() { $(this).attr('tabindex', '0'); });
            }, 300);
          });
        }
      }

      // Advance the slides on focus when aria-hidden.
      if (e.type === 'load') {
        slides.each(function() {
          $(this).attr('tabindex', '0');

          $(this).on('focus', function() {
            if ($(this).attr('aria-hidden') === 'true') {
              slickSlider.slick('slickGoTo', parseInt($(this).attr('data-slick-index')));
            }
          });
        });
      }

      // Iterate through our settings to see if we should unslick the slider or not.
      if (settings.responsive) {
        settings.responsive.forEach(function(value) {
          if (value.breakpoint <= windowWidth) {
            if (value.settings === 'unslick') {
              unslicked = true;
            }
            else {
              unslicked = false;
            }

            // Determine if is autoplaying
            if (value.settings.autoplay === true) {
              isAutoPlay = true;
            } else {
              isAutoPlay = false;
            }

            // Check slidesToShow
            if (value.settings.slidesToShow) {
              slidesToShow = value.settings.slidesToShow;
            }
          }
        })
      }

      // If there is less slides than slidesToShow setting, unslick
      if (slidesToShow >= slides.length) {
        unslicked = true;
      }

      // Add a class if the slider is unslicked.
      // For example: if we want to hide the arrows.
      if (unslicked === true && !slickSlider.hasClass('unslicked')) {
        slickWrapper.addClass('unslicked');
        slickSlider.slick('unslick');
        slickSlider.attr('aria-live', 'off');

        slickWrapper.find('.slick-prev, .slick-next').removeAttr('aria-controls');
      }
      else if (unslicked === false) {
        // If the slider was previously "unslicked" reinitialize the slider.
        if (wasUnslicked) {

          // Use the arrows that exist instead of appending new ones.
          settings.nextArrow = slickWrapper.find('.slick__arrow .slick-next');
          settings.prevArrow = slickWrapper.find('.slick__arrow .slick-prev');
          settings.adaptiveHeight = false;
          slickSlider.slick(settings);
        }

        slickWrapper.removeClass('unslicked');

        // If Autoplay is true, set aria-live=off, otherwise aria-live=polite
        if (isAutoPlay === true && slickSlider.attr('aria-live') === 'polite') {
          slickSlider.attr('aria-live', 'off');
        } else {
          slickSlider.attr('aria-live', 'polite');
        }
      }

      slides.each(function() {
        // Center the arrows on the images.
        if ($(this).find('img').length && arrows.length) {
          var imgElement = $(this).find('img'),
            slideOffset = Math.abs($(this).offset().top),
            imgOffset = Math.abs(imgElement.offset().top) - slideOffset,
            imgHeight = imgElement.height(),
            calculatedTop = imgOffset + (imgHeight / 2) - arrows.height();

          arrows.css({
            top: calculatedTop,
            marginTop: 10
          });
          arrows.addClass('adjusted');
        } else {
          if (arrows.hasClass('adjusted')) {
            arrows.removeClass('adjusted');
            arrows.removeAttr('style');
          }
        }

        // Fix tabindex
        if (unslicked === true) {
          $(this).removeAttr('tabindex');
          $(this).find('*[tabindex="-1"]').removeAttr('tabindex');
        }
      });
    });
  });
})(jQuery);