import { n as e, t } from "../../utils-C_mWfcFX.js";
//#region src/primitives/select/combobox.ts
var n = 150, r = class {
	el;
	inputEl;
	dropdownEl;
	listboxId;
	optionEls = [];
	config;
	currentOptions;
	filteredOptions = [];
	selectedValue = null;
	highlightedIndex = -1;
	isOpen = !1;
	isDestroyed = !1;
	debounceTimer = null;
	handleInputFocus;
	handleInputInput;
	handleInputKeydown;
	handleDocumentClick;
	constructor(n) {
		this.config = n, this.currentOptions = [...n.options], this.filteredOptions = [...this.currentOptions], this.listboxId = e("cmm-combobox-listbox"), n.value !== void 0 && (this.selectedValue = n.value), this.el = document.createElement("div"), this.el.className = "cmm-combobox", n.className && this.el.classList.add(n.className), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "cmm-combobox__input", this.inputEl.id = e("cmm-combobox-input"), this.inputEl.setAttribute("role", "combobox"), this.inputEl.setAttribute("aria-haspopup", "listbox"), this.inputEl.setAttribute("aria-expanded", "false"), this.inputEl.setAttribute("aria-controls", this.listboxId), this.inputEl.setAttribute("aria-autocomplete", "list"), n.placeholder && (this.inputEl.placeholder = n.placeholder);
		let r = n.ariaLabel ?? n.placeholder ?? "Select an option";
		if (this.inputEl.setAttribute("aria-label", r), n.disabled === !0 && (this.inputEl.disabled = !0, this.el.classList.add("cmm-combobox--disabled")), this.selectedValue !== null) {
			let e = this.currentOptions.find((e) => e.value === this.selectedValue);
			e !== void 0 && (this.inputEl.value = e.label);
		}
		this.dropdownEl = document.createElement("div"), this.dropdownEl.id = this.listboxId, this.dropdownEl.className = "cmm-combobox__dropdown", this.dropdownEl.setAttribute("role", "listbox"), this.dropdownEl.style.display = "none", this.renderOptions(), this.el.appendChild(this.inputEl), this.el.appendChild(this.dropdownEl), this.handleInputFocus = () => {
			this.isDestroyed || this.openDropdown();
		}, this.handleInputInput = () => {
			this.isDestroyed || this.onInputChange();
		}, this.handleInputKeydown = (e) => {
			this.isDestroyed || this.onKeydown(e);
		}, this.handleDocumentClick = (e) => {
			if (this.isDestroyed) return;
			let t = e.target;
			this.el.contains(t) || this.closeDropdown();
		}, this.inputEl.addEventListener("focus", this.handleInputFocus), this.inputEl.addEventListener("input", this.handleInputInput), this.inputEl.addEventListener("keydown", this.handleInputKeydown), n.container !== void 0 && t(n.container).appendChild(this.el);
	}
	getValue() {
		return this.selectedValue;
	}
	setValue(e) {
		let t = this.currentOptions.find((t) => t.value === e);
		t !== void 0 && (this.selectedValue = e, this.inputEl.value = t.label, this.updateSelectedState());
	}
	setOptions(e) {
		this.currentOptions = [...e], this.filteredOptions = [...this.currentOptions], this.renderOptions();
	}
	setDisabled(e) {
		this.inputEl.disabled = e, e ? (this.el.classList.add("cmm-combobox--disabled"), this.isOpen && this.closeDropdown()) : this.el.classList.remove("cmm-combobox--disabled");
	}
	focus() {
		this.inputEl.focus();
	}
	destroy() {
		this.isDestroyed = !0, this.debounceTimer !== null && clearTimeout(this.debounceTimer), this.closeDropdown(), this.inputEl.removeEventListener("focus", this.handleInputFocus), this.inputEl.removeEventListener("input", this.handleInputInput), this.inputEl.removeEventListener("keydown", this.handleInputKeydown), document.removeEventListener("click", this.handleDocumentClick), this.el.remove();
	}
	onInputChange() {
		this.debounceTimer !== null && clearTimeout(this.debounceTimer), this.debounceTimer = setTimeout(() => {
			let e = this.inputEl.value.toLowerCase();
			this.config.onSearch?.(e), e ? this.filteredOptions = this.currentOptions.filter((t) => t.label.toLowerCase().includes(e)) : this.filteredOptions = [...this.currentOptions], this.renderOptions(), this.isOpen || this.openDropdown(), this.setHighlightedIndex(0);
		}, n);
	}
	openDropdown() {
		this.isOpen || this.inputEl.disabled || (this.isOpen = !0, this.dropdownEl.style.display = "", this.inputEl.setAttribute("aria-expanded", "true"), this.positionDropdown(), document.addEventListener("click", this.handleDocumentClick));
	}
	closeDropdown() {
		this.isOpen && (this.isOpen = !1, this.dropdownEl.style.display = "none", this.inputEl.setAttribute("aria-expanded", "false"), this.inputEl.removeAttribute("aria-activedescendant"), this.highlightedIndex = -1, this.clearHighlight(), document.removeEventListener("click", this.handleDocumentClick));
	}
	renderOptions() {
		this.dropdownEl.innerHTML = "", this.optionEls = [];
		for (let e of this.filteredOptions) this.appendOption(e);
		if (this.config.creatable === !0) {
			let e = this.inputEl.value.trim();
			e && (this.currentOptions.some((t) => t.label.toLowerCase() === e.toLowerCase()) || this.appendCreateOption(e));
		}
	}
	appendOption(t) {
		let n = document.createElement("div");
		n.id = e("cmm-combobox-option"), n.className = "cmm-combobox__option", n.setAttribute("role", "option"), n.setAttribute("data-value", t.value), n.textContent = t.label, t.disabled === !0 && (n.classList.add("cmm-combobox__option--disabled"), n.setAttribute("aria-disabled", "true")), t.value === this.selectedValue ? (n.classList.add("cmm-combobox__option--selected"), n.setAttribute("aria-selected", "true")) : n.setAttribute("aria-selected", "false"), n.addEventListener("mousedown", (e) => {
			e.preventDefault(), t.disabled !== !0 && this.selectOption(t.value, t.label);
		}), this.dropdownEl.appendChild(n), this.optionEls.push(n);
	}
	appendCreateOption(t) {
		let n = document.createElement("div");
		n.id = e("cmm-combobox-create"), n.className = "cmm-combobox__option cmm-combobox__create", n.setAttribute("role", "option"), n.setAttribute("data-create", t), n.textContent = `Create: ${t}`, n.addEventListener("mousedown", (e) => {
			e.preventDefault(), this.config.onCreate?.(t), this.inputEl.value = t, this.selectedValue = t, this.closeDropdown();
		}), this.dropdownEl.appendChild(n), this.optionEls.push(n);
	}
	selectOption(e, t) {
		this.selectedValue = e, this.inputEl.value = t, this.updateSelectedState(), this.closeDropdown(), this.config.onChange?.(e);
	}
	updateSelectedState() {
		for (let e of this.optionEls) e.getAttribute("data-value") === this.selectedValue ? (e.classList.add("cmm-combobox__option--selected"), e.setAttribute("aria-selected", "true")) : (e.classList.remove("cmm-combobox__option--selected"), e.setAttribute("aria-selected", "false"));
	}
	positionDropdown() {
		let e = this.inputEl.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = e.top;
		t < 256 && n > t ? (this.dropdownEl.classList.add("cmm-combobox__dropdown--above"), this.dropdownEl.classList.remove("cmm-combobox__dropdown--below")) : (this.dropdownEl.classList.add("cmm-combobox__dropdown--below"), this.dropdownEl.classList.remove("cmm-combobox__dropdown--above"));
	}
	getSelectableOptionEls() {
		return this.optionEls.filter((e) => !e.classList.contains("cmm-combobox__option--disabled"));
	}
	setHighlightedIndex(e) {
		this.clearHighlight();
		let t = this.getSelectableOptionEls();
		if (t.length === 0) {
			this.highlightedIndex = -1;
			return;
		}
		this.highlightedIndex = Math.max(0, Math.min(e, t.length - 1));
		let n = t[this.highlightedIndex];
		n !== void 0 && (n.classList.add("cmm-combobox__option--highlighted"), n.scrollIntoView({ block: "nearest" }), this.inputEl.setAttribute("aria-activedescendant", n.id));
	}
	clearHighlight() {
		for (let e of this.optionEls) e.classList.remove("cmm-combobox__option--highlighted");
	}
	onKeydown(e) {
		let t = this.getSelectableOptionEls();
		switch (e.key) {
			case "ArrowDown":
				if (e.preventDefault(), !this.isOpen) this.openDropdown(), this.setHighlightedIndex(0);
				else {
					let e = this.highlightedIndex < t.length - 1 ? this.highlightedIndex + 1 : 0;
					this.setHighlightedIndex(e);
				}
				break;
			case "ArrowUp":
				if (e.preventDefault(), this.isOpen) {
					let e = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : t.length - 1;
					this.setHighlightedIndex(e);
				}
				break;
			case "Enter":
				if (e.preventDefault(), this.isOpen && this.highlightedIndex >= 0) {
					let e = t[this.highlightedIndex];
					if (e !== void 0) {
						let t = e.getAttribute("data-create");
						if (t !== null) this.config.onCreate?.(t), this.inputEl.value = t, this.selectedValue = t, this.closeDropdown();
						else {
							let t = e.getAttribute("data-value");
							if (t !== null) {
								let e = this.filteredOptions.find((e) => e.value === t);
								e !== void 0 && this.selectOption(e.value, e.label);
							}
						}
					}
				}
				break;
			case "Escape":
				this.isOpen && (e.preventDefault(), this.closeDropdown());
				break;
			case "Tab":
				this.closeDropdown();
				break;
		}
	}
};
//#endregion
export { r as Combobox };

//# sourceMappingURL=combobox.js.map