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

	wrapCarousel(testimonials) {
		// Add Bootstrap carousel classes
		testimonials.classList.add('carousel', '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');

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

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

		let slideIndex = 0;
		let first = true;

		testimonials.querySelectorAll('.wp-block-columns').forEach(testimonial => {
			// Create each slide
			const item = document.createElement('div');
			item.classList.add('carousel-item');
			if (first) {
				item.classList.add('active');
				first = false;
			}

			item.appendChild(testimonial);
			inner.appendChild(item);

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

		// Add indicators before the inner container
		testimonials.prepend(indicators);
		testimonials.appendChild(inner);

		// Initialize Bootstrap carousel
		new bootstrap.Carousel(testimonials, { interval: false });

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

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

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

		if (!filterButtons.length) return;

		// Get the first filter button and set it as active
		const firstButton = filterButtons[0];
		firstButton.classList.add('active');
		const firstFilterSector = firstButton.querySelector('a').getAttribute('href').substring(1);
		const firstFilterClass = 'is-setor-' + firstFilterSector;

		// Transfer the is-setor-* class to the .carousel-item
		slides.forEach(slide => {
			slide.querySelectorAll('.wp-block-columns').forEach(testimonial => {
				testimonial.classList.forEach(cls => {
					if (cls.startsWith('is-setor-')) {
						slide.classList.add(cls);
						testimonial.classList.remove(cls);
					}
				});
			});
		});

		// Function to update the slides and indicators based on the selected sector
		function updateCarousel(filterClass) {
			slides.forEach(slide => {
				slide.classList.remove('active');
				slide.style.display = slide.classList.contains(filterClass) ? '' : 'none';
			});

			const visibleSlides = carousel.querySelectorAll('.carousel-item:not([style*="display: none"])');
			indicatorsContainer.innerHTML = '';

			visibleSlides.forEach((slide, index) => {
				if (index === 0) {
					slide.classList.add('active');
				}
				const indicatorBtn = document.createElement('button');
				indicatorBtn.setAttribute('type', 'button');
				indicatorBtn.setAttribute('data-bs-target', `#${carousel.id}`);
				indicatorBtn.setAttribute('data-bs-slide-to', index);
				if (index === 0) {
					indicatorBtn.classList.add('active');
				}
				indicatorsContainer.appendChild(indicatorBtn);
			});
		}

		// Add click events to filter buttons
		filterButtons.forEach(button => {
			button.addEventListener('click', function(e) {
				e.preventDefault();
				filterButtons.forEach(b => b.classList.remove('active'));
				button.classList.add('active');

				const filterSector = button.querySelector('a').getAttribute('href').substring(1);
				updateCarousel('is-setor-' + filterSector);
			});
		});

		// Apply the initial filter based on the first button
		updateCarousel(firstFilterClass);
	}
};
