const textContainers = document.querySelectorAll(".text-container");

// Loop through all text containers
textContainers.forEach((container) => {
	// Get a array of letters from the text
	const textArray = getLetterArray(container);

	// Clear the text from the container
	container.textContent = "";

	// Loop through the array of letters
	textArray.forEach((letter) => {
		// Create a div for each letter
		const letterBox = document.createElement("div");
		letterBox.classList.add("letter");

		// Add mouse events to the letter div
		addMouseEvents(letterBox);

		// Create a span for the letter and add it to the letter div
		letterBox.appendChild(createSpan(letter, "letter-front"));
		letterBox.appendChild(createSpan(letter, "letter-background"));

		// Add the letter div to the text container
		container.appendChild(letterBox);
	});
});

/**
 * Get an array of letters from the text
 * @param {HTMLElement} element
 */
function getLetterArray(element) {
	const text = element.textContent.trim();
	return text.split("");
}

/**
 * Add mouse events to the letter div
 * @param {HTMLElement} element
 * @param {string} className
 */
function addMouseEvents(element) {
	element.addEventListener("mouseenter", ($event) => animateLetters($event));
	element.addEventListener("mouseleave", ($event) => animateLetters($event));
}

/**
 * Create a span for the letter
 * @param {string} letter
 * @param {string} className
 */
function createSpan(letter, className) {
	const span = document.createElement("span");
	span.classList.add(className);
	span.textContent = letter;
	return span;
}

/**
 * Animate the letters when hovering over them
 * @param {MouseEvent} $event
 */
function animateLetters($event) {
	if ($event.target.previousSibling) {
		$event.target.previousSibling.classList.toggle("active-before");
	}
	$event.target.classList.toggle("active");
	if ($event.target.nextSibling) {
		$event.target.nextSibling.classList.toggle("active-after");
	}
}