$(document).ready(function() {
  /**
   * [Jquery Grid Slider Plugin]
   * @param  {[type]} options [description]
   * @return {[type]}         [description]
   */

  document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen || document.msFullscreenEnabled;

  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }

  function requestFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  }

  $.fn.gridSlider = function (options) {
    // var settings = $.extend({
    //   // These are the defaults.
    // }, options );

    function updatePagination($slick, curr, max) {
      var max = $slick.slideCount;
      var prev = (curr == 1 ? max : curr - 1);
      var next = (curr < max ? curr + 1 : 1);
      if ($slick.slideCount > 1) {
        var $pagination = $slick.$slider.parent().parent().find('.slider-pagination');
        $pagination.addClass('show');
        $pagination.html('<a class="icon-Bosch-Ic-arrow-black-left" href="#' + prev + '"></a> <span>' + curr + ' / ' + max + '</span> <a class="icon-Bosch-Ic-arrow-black-right" href="#' + next + '"></a>');
      }
    }

    function presentationToggle() {
      if (document.fullscreenEnabled) {
        var modalBody = document.querySelector('.modal-body');
        var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
        if (fullscreenElement && fullscreenElement.classList.contains('modal-body')) {
          exitFullscreen(modalBody)
        } else {
          requestFullscreen(modalBody);
        }
      }
    }

    function toggleDeviceEvents(e) {
      var $modalSliderItems = $('.modal-body');
      // ### MOBILE/TABLET ###
      if (e.matches) {
        // console.log('This is a mobile screen.');
        $modalSliderItems.on('click', presentationToggle);
      }

      // ### DESKTOP ###
      else {
        // console.log('This is a tablet/desktop screen.');
        $modalSliderItems.off('click');
      }
    }

    function modalSliderOpen(e, index) {
      var modalSlider = $(e.currentTarget).find('.modal-slider');

      // Init Modal Slick Slider
      modalSlider
          .on('init', function (event, $slider) {
            updatePagination($slider, index + 1, $slider.slideCount);
            // Init Cliplister
            $(e.currentTarget).find('.o-grid_images__image--video').CliplisterView();
          })
          .slick({
            'initialSlide': (typeof index !== 'undefined' ? index : 0),
            'rows': 0,
            'infinite': false,
            'arrows': true,
            'dots': false
          })
          .on('beforeChange', function (event, $slider, currentSlide, nextSlide) {
            var slide = $slider.$slides.get(currentSlide)
            // Stop Video on Next/Prev
            $(slide).find('.o-grid_images__image--video').each(function () {
              this.api.stop();
            })
          })
          .on('afterChange', function (event, $slider, currentSlide, nextSlide) {
            updatePagination($slider, currentSlide + 1, $slider.slideCount);
          });

      // Reinit because of IE11 :/
      setTimeout(function (e) {
        modalSlider.slick('setPosition');
      }, 1000)
    }

    function modalSliderClose(e) {
      var thisModal = e.currentTarget;
      var videos = thisModal.querySelectorAll('.video-player');
      try {
        for (var i = 0, len = videos.length; i < len; i++) {
          videos[i].api.destroy();
        }
        $(thisModal).find('.modal-slider').slick('destroy').html('');
      } catch (err) {
      }
    }

    // ### MAIN Plugin Function ###
    return this.each(function () {
      var $instance = $(this);
      var gridSlider = $instance.find('.o-grid_slider__slides');
      gridSlider
          .on('init', function (event, $slider) {
            updatePagination($slider, 1, $slider.slideCount);
            $instance.find('.slider-pagination').on('click', 'a', function (e) {
              e.preventDefault();
              var id = e.target.href.split('#')[1];
              gridSlider.slick('slickGoTo', id - 1);
            });
          })
          .slick({
            'infinite': true,
            'slide': '.o-grid_images',
            'dots': false,
            'arrows': true,
            'rows': 0,
            'responsive': [
              {
                'breakpoint': 768,
                'settings': {
                  'slide': '.o-grid_images__item'
                }
              }
            ]
          })
          .on('afterChange', function (event, $slider, currentSlide, nextSlide) {
            updatePagination($slider, currentSlide + 1, $slider.slideCount);
          });

      $instance.on('click', '.o-grid_images__item', function (e) {
        var target = $(e.currentTarget);
        // Ignore clicks inside modal!
        if (target.parents('.modal').length > 0) {
          return;
        }
        var index = target.data('index');
        var modalId = 'video-modal-' + (Date.now().toString(36) + Math.random().toString(36).substr(2, 5));
        var dynModal = new bsModal({classes: 'm-modal m-modal--slider', container: 'container'});

        // Hide dyn content until markup and initialisation is ready (avoid flickering)
        dynModal.modalBody.css('opacity', '0');
        // Prepare Slick Slider
        var slides = target.closest('.o-grid_slider').find('.o-grid_slider__slides > .o-grid_images__item').clone();
        if (slides.length < 1) {
          slides = target.closest('.o-grid_slider').find('.slick-track > .o-grid_images__item:not(.slick-cloned)').clone();
        }
        slides.find('.o-grid_images__image--video').empty().removeClass('o-grid_images__image lazyloaded lazyload').removeAttr('data-bgset style');

        dynModal.modalBody.append('<div class="modal-slider"></div>');
        var modalSlider = dynModal.modalBody.find('.modal-slider');
        modalSlider.append(slides);
        dynModal.setFooter('<div class="m-modal--slider__pagination slider-pagination"></div>');

        // ### Event Handlers inside Modal ##

        // Präsentations-Modus Mobile/Tablet
        var mql = window.matchMedia('(max-device-width: 1024px)');
        mql.addListener(toggleDeviceEvents);
        toggleDeviceEvents(mql);

        // Custom Pagination
        $('.m-modal--slider .slider-pagination').on('click', 'a', function (e) {
          e.preventDefault();
          var id = e.target.href.split('#')[1];
          modalSlider.slick('slickGoTo', id - 1);
        });

        // Init Slider & Cliplister on shown.bs.modal
        dynModal.modal.on('shown.bs.modal', function (e) {
          modalSliderOpen(e, index);
          // Change back to visible after everything is done
          dynModal.modalBody.css('opacity', '1');
        });

        // Destroy Slick & Cliplister on Close
        dynModal.modal.on('hide.bs.modal', modalSliderClose);

        dynModal.show();
      });
    });
  };

  $('.o-grid_slider').gridSlider();
  $('body').on('click', '.slider-pagination a, .modal-slider .slick-arrow', function () {
      const currentModal = $(this).closest('#bsModal');
      if (currentModal.find('.ytvideo-player').length) {
          const currentSlide = currentModal.find('.slick-active');
          let prevSlide = currentSlide.prev();
          if (prevSlide.length === 0) {
              prevSlide = currentSlide.siblings(":last");
          }
          let nextSlide = currentSlide.next();
          if (nextSlide.length === 0) {
              nextSlide = currentSlide.siblings(":first");
          }
          const prevId = prevSlide.find('.yt-video .ytvideo-player').attr('id');
          const nextId = nextSlide.find('.yt-video .ytvideo-player').attr('id');

          if (undefined !== prevId) {
              const prevElement = currentModal.find('#' + prevId);
              const video = prevElement.attr("src");
              prevElement.attr("src","");
              prevElement.attr("src",video);
          }
          if (undefined !== nextId) {
              const nextElement = currentModal.find('#' + nextId);
              const video = nextElement.attr("src");
              nextElement.attr("src","");
              nextElement.attr("src",video);
          }
      }
  });
});