const ninodemTestimonialsCarousel = {
	init() {
		document.querySelectorAll('.testimonials-carousel')
			.forEach(testimonials => this.wrapCarousel(testimonials));
	},

	wrapCarousel(testimonials) {
		// Add Bootstrap carousel classes
		testimonials.classList.add('carousel', 'carousel-fade', 'slide');
		const uniqid = Math.floor(Math.random() * (999 - 100 + 1) + 100);
		const carouselId = 'carouselTestimonial' + uniqid;
		testimonials.setAttribute('id', carouselId);
		testimonials.setAttribute('data-bs-interval', 'false');

		const indicators = document.createElement('div');
		indicators.classList.add('carousel-indicators');

		const inner = document.createElement('div');
		inner.classList.add('carousel-inner');

		testimonials.querySelectorAll('.wp-block-columns').forEach((testimonial, index) => {
			const item = document.createElement('div');
			item.classList.add('carousel-item');
			if (index === 0) item.classList.add('active');

			// Transfer sector class to slide
			testimonial.classList.forEach(cls => {
				if (cls.startsWith('is-setor-')) {
					item.classList.add(cls);
					testimonial.classList.remove(cls);
				}
			});

			item.setAttribute('data-index', index);
			item.appendChild(testimonial);
			inner.appendChild(item);

			const indicator = document.createElement('button');
			indicator.type = 'button';
			indicator.setAttribute('data-bs-target', `#${carouselId}`);
			indicator.setAttribute('data-bs-slide-to', index);
			indicator.setAttribute('aria-label', `Slide ${index + 1}`);
			if (index === 0) {
				indicator.classList.add('active');
				indicator.setAttribute('aria-current', 'true');
			}
			indicators.appendChild(indicator);
		});

		testimonials.prepend(indicators);
		testimonials.appendChild(inner);

		const bsCarousel = new bootstrap.Carousel(testimonials, { interval: false });

		// Trigger filter initialization
		ninodemTestimonialsFilter.init(testimonials, bsCarousel);
	}
};

document.addEventListener('DOMContentLoaded', () => ninodemTestimonialsCarousel.init());

const ninodemTestimonialsFilter = {
	init(carousel, bsCarousel) {
		const parentContainer = carousel.closest('.testimonials');
		const filterButtons = parentContainer.querySelectorAll('.wp-block-buttons .wp-block-button');
		const slides = carousel.querySelectorAll('.carousel-item');
		const indicators = carousel.querySelectorAll('.carousel-indicators button');

		if (!filterButtons.length) return;

		const setorToIndex = {};
		const indexToSetor = [];

		// Map sector to index
		slides.forEach((slide, index) => {
			const setorClass = Array.from(slide.classList).find(cls => cls.startsWith('is-setor-'));
			if (setorClass) {
				const setor = setorClass.replace('is-setor-', '');
				setorToIndex[setor] = index;
				indexToSetor[index] = setor;
			}
		});

		// Activate button based on current slide index
		function activateFilterByIndex(index) {
			const setor = indexToSetor[index];
			filterButtons.forEach(btn => {
				const href = btn.querySelector('a').getAttribute('href').substring(1);
				if (href === setor) {
					btn.classList.add('is-style-outline');
				} else {
					btn.classList.remove('is-style-outline');
				}
			});
		}

		// Clicking on the filter activates the slide
		filterButtons.forEach(button => {
			button.addEventListener('click', function (e) {
				e.preventDefault();
				const setor = this.querySelector('a').getAttribute('href').substring(1);
				const targetIndex = setorToIndex[setor];
				if (targetIndex !== undefined) {
					bsCarousel.to(targetIndex);
				}
			});
		});

		// Update active button when slide changes
		carousel.addEventListener('slide.bs.carousel', function (e) {
			activateFilterByIndex(e.to);
		});

		// Initialize with first active filter
		activateFilterByIndex(0);
	}
};
