document.addEventListener('DOMContentLoaded', function () {
	document.querySelectorAll('.breaking-news-section').forEach(function (section) {
		const ticker = section.querySelector('.breaking-news-ticker');
		const track = section.querySelector('.breaking-news-track');
		const items = Array.from(
			section.querySelectorAll('.breaking-news-item')
		);

		const previousButton = section.querySelector('.breaking-news-prev');
		const nextButton = section.querySelector('.breaking-news-next');

		if (!ticker || !track || items.length === 0) {
			return;
		}

		const autoplaySpeed =
			parseInt(section.dataset.autoplaySpeed, 10) || 5000;

		let currentIndex = 0;
		let visiblePosts = 3;
		let intervalID;

		function getVisiblePosts() {
			const screenWidth = window.innerWidth;

			if (screenWidth <= 600) {
				return 1;
			}

			if (screenWidth <= 991) {
				return 2;
			}

			return 3;
		}

		function getMaximumIndex() {
			return Math.max(0, items.length - visiblePosts);
		}

		function updateAccessibility() {
			items.forEach(function (item, index) {
				const isVisible =
					index >= currentIndex &&
					index < currentIndex + visiblePosts;

				item.setAttribute(
					'aria-hidden',
					isVisible ? 'false' : 'true'
				);

				const link = item.querySelector('a');

				if (link) {
					link.tabIndex = isVisible ? 0 : -1;
				}
			});
		}

		function updateSlider() {
			const itemWidth = 100 / visiblePosts;
			const translateAmount = currentIndex * itemWidth;

			track.style.transform =
				'translateX(-' + translateAmount + '%)';

			updateAccessibility();
		}

		function showNext() {
			const maximumIndex = getMaximumIndex();

			if (currentIndex >= maximumIndex) {
				currentIndex = 0;
			} else {
				currentIndex++;
			}

			updateSlider();
		}

		function showPrevious() {
			const maximumIndex = getMaximumIndex();

			if (currentIndex <= 0) {
				currentIndex = maximumIndex;
			} else {
				currentIndex--;
			}

			updateSlider();
		}

		function stopTicker() {
			if (intervalID) {
				window.clearInterval(intervalID);
				intervalID = null;
			}
		}

		function startTicker() {
			stopTicker();

			if (items.length > visiblePosts) {
				intervalID = window.setInterval(
					showNext,
					autoplaySpeed
				);
			}
		}

		function handleResize() {
			const newVisiblePosts = getVisiblePosts();

			if (newVisiblePosts === visiblePosts) {
				return;
			}

			visiblePosts = newVisiblePosts;

			if (currentIndex > getMaximumIndex()) {
				currentIndex = getMaximumIndex();
			}

			updateSlider();
			startTicker();
		}

		previousButton?.addEventListener('click', function () {
			showPrevious();
			startTicker();
		});

		nextButton?.addEventListener('click', function () {
			showNext();
			startTicker();
		});

		section.addEventListener('mouseenter', stopTicker);
		section.addEventListener('mouseleave', startTicker);
		section.addEventListener('focusin', stopTicker);

		section.addEventListener('focusout', function (event) {
			if (!section.contains(event.relatedTarget)) {
				startTicker();
			}
		});

		section.addEventListener('keydown', function (event) {
			if (event.key === 'ArrowLeft') {
				event.preventDefault();
				showPrevious();
				startTicker();
			}

			if (event.key === 'ArrowRight') {
				event.preventDefault();
				showNext();
				startTicker();
			}
		});

		window.addEventListener('resize', handleResize);

		visiblePosts = getVisiblePosts();
		updateSlider();
		startTicker();
	});
});