import $ from 'jquery';

class Masthead {
	constructor(element) {
		this.$element = $(element);
		this.$slider = this.$element.find('.masthead--slider');

		this.init();
	}

	init() {
		const itemCount = this.$slider.find('.masthead--slider-item').length;

		if (itemCount > 1) {
			this.$slider.addClass('owl-carousel');

			this.$slider.owlCarousel({
				loop: true,
				dots: true,
				animateIn: true,
				items: 1,
				onInitialized: (event) => this.firstSlideClass(event),
				onTranslated: (event) => this.firstSlideClass(event),
			});
		} else {
			this.$slider.removeClass('owl-carousel');
		}
	}

	firstSlideClass(event) {
		// Get all real (non-cloned) items
		const $realItems = this.$slider.find('.owl-item:not(.cloned)');
		const $allItems = this.$slider.find('.owl-item');

		// Get the first real item DOM reference
		const $firstRealSlide = $realItems.first();

		// Get the index of current slide
		const currentIndex = event.item.index;

		// Get the current DOM element
		const $currentItem = $allItems.eq(currentIndex);

		// Remove first-slide from all
		// $allItems.removeClass('first-slide');

		// Compare: if the current item is the original first slide (or a clone of it)
		const firstSlideContent = $firstRealSlide.html();
		const currentContent = $currentItem.html();

		// Use HTML comparison or some unique attribute to detect match
		if (firstSlideContent === currentContent) {
			$currentItem.addClass('first-slide');
		}
	}
}

$('[data-masthead]').each((index, element) => new Masthead(element));