import e from "../DropdownListItem.js";
import { tap as t } from "../../helpers/functions.js";
import { normalizeListOptions as n } from "../../helpers/utils.js";
import r from "../PlTooltip/PlTooltip.js";
import "../PlTooltip/index.js";
import { getErrorMessage as i } from "../../helpers/error.js";
import a from "../LongText.js";
import o from "../PlSvg/PlSvg.js";
import "../PlSvg/index.js";
import s from "../PlIcon24/PlIcon24.js";
import ee from "../PlIcon16/PlIcon16.js";
import './pl-autocomplete.css';/* empty css                */
import te from "../../utils/DoubleContour.js";
import { useLabelNotch as ne } from "../../utils/useLabelNotch.js";
import { deepEqual as c } from "../../helpers/objects.js";
import "../PlIcon16/index.js";
import "../PlMaskIcon24/index.js";
import re from "../../utils/DropdownOverlay/DropdownOverlay.js";
import "../../utils/DropdownOverlay/index.js";
import { useWatchFetch as l } from "../../composition/useWatchFetch.js";
import ie from "../../assets/images/required.js";
import { Fragment as ae, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as oe, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, openBlock as y, reactive as se, ref as b, renderList as ce, renderSlot as x, toDisplayString as S, unref as C, useModel as le, useSlots as ue, useTemplateRef as de, vModelText as fe, watch as w, watchPostEffect as pe, withCtx as T, withDirectives as me, withModifiers as E } from "vue";
import { refDebounced as he } from "@vueuse/core";
var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = { class: "pl-autocomplete__field" }, D = ["disabled", "placeholder"], O = {
	key: 0,
	class: "input-value"
}, k = { class: "pl-autocomplete__controls" }, A = {
	key: 2,
	class: "arrow-icon arrow-icon-default"
}, j = { key: 0 }, M = {
	key: 0,
	class: "nothing-found"
}, N = {
	key: 0,
	class: "pl-autocomplete__error"
}, P = {
	key: 1,
	class: "pl-autocomplete__helper"
}, F = {
	key: 2,
	class: "pl-autocomplete__helper"
}, I = /* @__PURE__ */ g({
	name: "PlAutocomplete",
	props: /* @__PURE__ */ _({
		optionsSearch: {},
		label: { default: "" },
		helper: { default: void 0 },
		loadingOptionsHelper: { default: void 0 },
		error: { default: void 0 },
		placeholder: { default: "..." },
		clearable: {
			type: Boolean,
			default: !1
		},
		required: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		arrowIcon: { default: void 0 },
		arrowIconLarge: { default: void 0 },
		optionSize: { default: "small" },
		formatValue: {
			type: Function,
			default: (e) => String(e)
		},
		groupPosition: { default: void 0 }
	}, {
		modelValue: { required: !0 },
		modelModifiers: {}
	}),
	emits: ["update:modelValue"],
	setup(g) {
		let _ = le(g, "modelValue"), I = g, ye = ue(), L = b(), R = b(), z = de("overlay"), B = b(null), V = se({
			activeIndex: -1,
			open: !1
		}), be = () => t(W.value.findIndex((e) => c(e.value, _.value)), (e) => e < 0 ? 0 : e), xe = () => V.activeIndex = be(), H = b([]), U = b(), W = u(() => n(H.value).map((e, t) => ({
			...e,
			index: t,
			isSelected: t === Se.value,
			isActive: t === V.activeIndex
		}))), G = b(!0), K = b(!1), q = u(() => I.disabled), Se = u(() => H.value.findIndex((e) => c(e.value, _.value))), J = u(() => {
			if (!G.value) {
				if (I.error) return i(I.error);
				if (K.value) return "Data loading error";
			}
		}), Y = u(() => {
			let e = C(U), t = C(W);
			return (e ?? t.find((e) => c(e.value, _.value)) ?? t.find((e) => c(e.value, _.value)))?.label || (_.value ? I.formatValue(_.value) : "");
		}), Ce = u(() => !V.open && _.value ? "" : _.value ? String(Y.value) : I.placeholder), X = u(() => _.value !== void 0 && _.value !== null), we = u(() => q.value ? void 0 : "0"), Z = (e) => {
			_.value = e?.value, U.value = e, B.value = null, V.open = !1, L?.value?.focus();
		}, Te = () => {
			_.value = void 0, U.value = void 0;
		}, Ee = () => R.value?.focus(), De = () => {
			V.open = !V.open;
		};
		w(() => V.open, (e) => {
			B.value = e ? "" : null;
		});
		let Oe = () => {
			V.open = !0;
		}, ke = (e) => {
			let t = e.relatedTarget;
			!L.value?.contains(t) && !z.value?.listRef?.contains(t) && (B.value = null, V.open = !1);
		}, Ae = (e) => {
			if ([
				"ArrowDown",
				"ArrowUp",
				"Enter",
				"Escape"
			].includes(e.code)) e.preventDefault();
			else return;
			let { open: t, activeIndex: n } = V;
			if (!t) {
				e.code === "Enter" && (V.open = !0, B.value = "");
				return;
			}
			e.code === "Escape" && (V.open = !1, B.value = null, L.value?.focus());
			let r = C(W), { length: i } = r;
			if (!i) return;
			e.code === "Enter" && Z(r.find((e) => e.index === n));
			let a = r.findIndex((e) => e.index === n) ?? -1, o = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, s = Math.abs(a + o + i) % i;
			V.activeIndex = W.value[s].index ?? -1;
		};
		ne(L), w(() => _.value, xe, { immediate: !0 }), w(() => V.open, (e) => e ? R.value?.focus() : ""), pe(() => {
			B.value, V.activeIndex >= 0 && V.open && z.value?.scrollIntoActive();
		});
		let je = he(B, 300, { maxWait: 1e3 }), Q = l(() => je.value, async (e) => {
			if (e !== null) return I.optionsSearch(e, "label");
		}), $ = l(() => _.value, async (e) => e != null && !c(U.value?.value, e) ? (await I.optionsSearch(String(e), "value"))?.[0] : U.value);
		return w(() => Q.value, (e) => {
			e && (H.value = e, B.value !== null && (K.value = !1));
		}), w(() => $.value, (e) => {
			e && (U.value = n([e])[0]);
		}), w(() => Q.error, (e) => {
			e && (K.value = !!e);
		}), w(() => Q.loading || $.loading, (e) => {
			G.value = e;
		}), (t, n) => (y(), p("div", {
			class: "pl-autocomplete__envelope",
			onClick: E(Ee, ["stop"])
		}, [m("div", {
			ref_key: "rootRef",
			ref: L,
			tabindex: we.value,
			class: v(["pl-autocomplete", {
				open: V.open,
				error: !!J.value,
				disabled: q.value
			}]),
			onKeydown: Ae,
			onFocusout: ke
		}, [m("div", _e, [
			m("div", ve, [
				me(m("input", {
					ref_key: "input",
					ref: R,
					"onUpdate:modelValue": n[0] ||= (e) => B.value = e,
					type: "text",
					tabindex: "-1",
					disabled: q.value,
					placeholder: Ce.value,
					spellcheck: "false",
					autocomplete: "chrome-off",
					onFocus: Oe
				}, null, 40, D), [[fe, B.value]]),
				V.open ? f("", !0) : (y(), p("div", O, [h(a, null, {
					default: T(() => [oe(S(Y.value), 1)]),
					_: 1
				})])),
				m("div", k, [
					G.value ? (y(), d(C(s), {
						key: 0,
						name: "loading"
					})) : f("", !0),
					g.clearable && X.value ? (y(), d(C(ee), {
						key: 1,
						class: "clear",
						name: "delete-clear",
						onClick: E(Te, ["stop"])
					})) : f("", !0),
					x(t.$slots, "append"),
					m("div", {
						class: "pl-autocomplete__arrow-wrapper",
						onClick: E(De, ["stop"])
					}, [g.arrowIconLarge ? (y(), p("div", {
						key: 0,
						class: v(["arrow-icon", [`icon-24 ${g.arrowIconLarge}`]])
					}, null, 2)) : g.arrowIcon ? (y(), p("div", {
						key: 1,
						class: v(["arrow-icon", [`icon-16 ${g.arrowIcon}`]])
					}, null, 2)) : (y(), p("div", A))])
				])
			]),
			g.label ? (y(), p("label", j, [
				g.required ? (y(), d(C(o), {
					key: 0,
					uri: C(ie)
				}, null, 8, ["uri"])) : f("", !0),
				m("span", null, S(g.label), 1),
				ye.tooltip ? (y(), d(C(r), {
					key: 1,
					class: "info",
					position: "top"
				}, {
					tooltip: T(() => [x(t.$slots, "tooltip")]),
					_: 3
				})) : f("", !0)
			])) : f("", !0),
			V.open ? (y(), d(C(re), {
				key: 1,
				ref: "overlay",
				root: L.value,
				class: "pl-autocomplete__options",
				tabindex: "-1",
				gap: 3
			}, {
				default: T(() => [(y(!0), p(ae, null, ce(W.value, (t, n) => (y(), d(e, {
					key: n,
					option: t,
					"is-selected": t.isSelected,
					"is-hovered": t.isActive,
					size: g.optionSize,
					onClick: E((e) => Z(t), ["stop"])
				}, null, 8, [
					"option",
					"is-selected",
					"is-hovered",
					"size",
					"onClick"
				]))), 128)), W.value.length ? f("", !0) : (y(), p("div", M, "Nothing found"))]),
				_: 1
			}, 8, ["root"])) : f("", !0),
			h(te, {
				class: "pl-autocomplete__contour",
				"group-position": g.groupPosition
			}, null, 8, ["group-position"])
		])], 42, ge), J.value ? (y(), p("div", N, S(J.value), 1)) : G.value && g.loadingOptionsHelper ? (y(), p("div", P, S(g.loadingOptionsHelper), 1)) : g.helper ? (y(), p("div", F, S(g.helper), 1)) : f("", !0)]));
	}
});
export { I as default };

//# sourceMappingURL=PlAutocomplete.vue2.js.map