Chatbot: Default

export default class Chatbot {

	// Enhances the server-rendered component with input state and suggestion navigation.
	constructor() {

		this.chatbots = document.querySelectorAll("[data-js-chatbot]");
		this.chatbots.forEach((chatbot) => this.init(chatbot));

	}

	init(chatbot) {

		const input = chatbot.querySelector("[data-chatbot-input]");

		if (!input) return;

		const submitButton = chatbot.querySelector("[data-chatbot-submit]");
		const clearButton = chatbot.querySelector("[data-chatbot-clear]");
		const suggestions = Array.from(chatbot.querySelectorAll("[data-chatbot-suggestion]"));
		const suggestionsContainer = chatbot.querySelector("[data-chatbot-suggestions]");
		const suggestionsHintId = input.getAttribute("aria-describedby");
		let isPointerOverSuggestions = false;

		const isSuggestion = (element) => suggestions.some((suggestion) => suggestion.contains(element));
		const setFocusedState = (isFocused) => chatbot.classList.toggle("-chatbotFocused", isFocused);

		chatbot.addEventListener("keydown", (event) => {
			if (event.key === "Escape") {
				setFocusedState(false);
			}
		});

		input.addEventListener("focus", () => setFocusedState(input.value.length < 1));
		input.addEventListener("blur", (event) => {
			if (!isPointerOverSuggestions && !isSuggestion(event.relatedTarget)) {
				setFocusedState(false);
			}
		});

		suggestionsContainer?.addEventListener("pointerenter", () => {
			isPointerOverSuggestions = true;
		});
		suggestionsContainer?.addEventListener("pointerleave", () => {
			isPointerOverSuggestions = false;

			if (document.activeElement !== input && !isSuggestion(document.activeElement)) {
				setFocusedState(false);
			}
		});

		// Keep the Figma variant's initial button state, then derive it from user input.
		const updateValueState = ({ preserveSubmitState = false } = {}) => {
			const hasValue = input.value.trim() !== "";

			chatbot.classList.toggle("-chatbotHasValue", hasValue);

			if (clearButton) {
				clearButton.hidden = !hasValue;
			}

			if (submitButton && !preserveSubmitState && !chatbot.hasAttribute("aria-busy")) {
				submitButton.disabled = !hasValue;
			}

			if (suggestionsHintId) {
				input.toggleAttribute("aria-describedby", !hasValue);
				if (!hasValue) input.setAttribute("aria-describedby", suggestionsHintId);
			}
		};

		input.addEventListener("input", () => {
			updateValueState();
			setFocusedState(input.value.length < 1);
		});
		input.addEventListener("keydown", (event) => {
			// Suggestions are regular buttons, so move real focus into the list.
			if (event.key === "ArrowDown" && suggestions.length && input.value.trim() === "") {
				event.preventDefault();
				suggestions[0].focus();
			}
		});

		clearButton?.addEventListener("click", () => {
			input.value = "";
			updateValueState();
			input.focus();
		});

		suggestions.forEach((suggestion, index) => {
			suggestion.addEventListener("focus", () => setFocusedState(true));
			suggestion.addEventListener("blur", (event) => {
				if (!isPointerOverSuggestions && event.relatedTarget !== input && !isSuggestion(event.relatedTarget)) {
					setFocusedState(false);
				}
			});

			suggestion.addEventListener("keydown", (event) => {
				// Keep keyboard focus inside the suggestion list, with input as its first item.
				if (event.key === "ArrowDown" && index < suggestions.length - 1) {
					event.preventDefault();
					suggestions[index + 1].focus();
				}

				if (event.key === "ArrowUp") {
					event.preventDefault();
					(index === 0 ? input : suggestions[index - 1]).focus();
				}

				if (event.key === "Escape") {
					event.preventDefault();
					input.focus();
				}
			});

			suggestion.addEventListener("click", () => {
				input.value = suggestion.value;
				updateValueState();
				input.focus();
				setFocusedState(false);
			});
		});

		// Do not overwrite the disabled state supplied by the current Fractal/backend variant.
		updateValueState({ preserveSubmitState: true });

	}
}