(function ($) {
	const ninodemFeatureSlider = {
		init: function () {
			const self = this;
			$(".feature-slider").each(function () {
				self.setup($(this));
				self.sliders($(this));
			});
		},

		setup: function ($featureSlider) {
			const $columns = $('<div class="wp-block-columns alignwide is-layout-flex wp-block-columns-is-layout-flex"></div>');
			const $wide = $('<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"></div>');
			const $mediaContainer = $('<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow feature-slider-media-content feature-slider-media"></div>');
			const $navContentContainer = $('<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow feature-slider-nav-content"></div>');
			const $navContainer = $('<div class="feature-slider-nav"></div>');
			const $contentContainer = $('<div class="feature-slider-media-content feature-slider-content"></div>');

			$featureSlider.find(".wp-block-columns").each(function () {
				const $columns = $(this).find(".wp-block-column");
				const $media = $columns.eq(0).find('.wp-block-video, .wp-block-image');
				const $secondColumn = $columns.eq(1);
				const $icon = $secondColumn.find(".icon-feature");
				const $content = $secondColumn.children().not(".icon-feature");

				$mediaContainer.append($("<div></div>").append($media));
				$navContainer.append($("<div></div>").append($icon));
				$contentContainer.append($("<div></div>").append($content));
			});

			$navContentContainer.append($navContainer).append($contentContainer);
			$columns.append($mediaContainer).append($navContentContainer);
			$featureSlider.empty().append($wide.append($columns));

			this.setupVideos($featureSlider);
		},

		sliders: function ($featureSlider) {
			const self = this;
			const $sliders = $featureSlider.find('.feature-slider-media-content');
			$sliders.each(function () {
				const $slider = $(this);
				if ($slider.is('.feature-slider-media')) {
					self.videos($slider);
				}
				$slider.slick({
					slidesToShow: 1,
					slidesToScroll: 1,
					arrows: false,
					draggable: false,
					fade: true,
					asNavFor: $featureSlider.find('.feature-slider-nav'),
				});
			});

			$featureSlider.find('.feature-slider-nav').slick({
				slidesToShow: 5,
				slidesToScroll: 1,
				arrows: false,
				draggable: false,
				asNavFor: $featureSlider.find('.feature-slider-media-content'),
				centerMode: true,
				focusOnSelect: true,
				responsive: [
					{
						breakpoint: 600,
						settings: {
							slidesToShow: 3,
						}
					},
				]
			});
		},

		videosStop: function ($slider) {
			let $allVideos = $slider.find("video");
			$allVideos.each(function () {
				if (!this.paused) {
					this.pause();
				}
				this.currentTime = 0;
			});
		},

		setupVideos: function ($slider) {
			let $allVideos = $slider.find("video");
			$.each(["autoplay", "loop"], function(_, attr) {
				$allVideos.removeAttr(attr);
			});
			this.videosStop($slider);
		},

		videos: function ($slider) {
			const self = this;
			$slider.on('beforeChange', function (event, slick) {
				self.videosStop(slick.$slider);
			});

			$slider.on('afterChange', function (event, slick, currentSlide) {
				self.video(slick, currentSlide);
			});

			$slider.on('init', function (event, slick) {
				self.video(slick);
			});
		},

		video: function(slick, currentSlide = 0) {
			const $currentSlide = slick.$slides.eq(currentSlide);
			let $video = $currentSlide.find("video");
			if ($video.length > 0) {
				$video = $video.eq(0);
				if ($video) {
					$video.get(0).play();
					$video.off("ended").on("ended", function () {
						slick.slickNext();
					});
				}
			} else {
				setTimeout(() => {
					slick.slickNext();
				}, 12000);
			}
		},
	};

	ninodemFeatureSlider.init();
})(jQuery);
