import e from "../DropdownListItem.js";
import t from "../PlTooltip/PlTooltip.js";
import "../PlTooltip/index.js";
import { getErrorMessage as n } from "../../helpers/error.js";
import r from "../PlSvg/PlSvg.js";
import "../PlSvg/index.js";
import i from "../PlIcon24/PlIcon24.js";
import a from "../../utils/DoubleContour.js";
import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
import { deepEqual as s, deepIncludes as c } from "../../helpers/objects.js";
import "../PlMaskIcon24/index.js";
import ee from "../../utils/DropdownOverlay/DropdownOverlay.js";
import { useWatchFetch as l } from "../../composition/useWatchFetch.js";
import te from "../../assets/images/required.js";
import './pl-autocomplete-multi.css';/* empty css                      */
import u from "../PlChip/PlChip.js";
import "../PlChip/index.js";
import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as ne, defineComponent as v, normalizeClass as re, openBlock as y, reactive as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, toRef as T, unref as E, useSlots as ie, useTemplateRef as ae, vModelText as D, watch as O, withCtx as k, withDirectives as oe, withModifiers as A } from "vue";
import se from "canonicalize";
var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue = { class: "pl-autocomplete-multi__field" }, de = ["disabled", "placeholder"], fe = {
	key: 0,
	class: "chips-container"
}, pe = { class: "pl-autocomplete-multi__controls" }, me = { key: 0 }, he = { class: "pl-autocomplete-multi__open-chips-container" }, ge = {
	key: 0,
	class: "nothing-found"
}, j = {
	key: 0,
	class: "pl-autocomplete-multi__error"
}, M = {
	key: 1,
	class: "pl-autocomplete-multi__helper"
}, N = /* @__PURE__ */ v({
	name: "PlAutocompleteMulti",
	props: {
		modelValue: { default: () => [] },
		optionsSearch: {},
		sourceId: { default: void 0 },
		label: { default: void 0 },
		helper: { default: void 0 },
		error: { default: void 0 },
		placeholder: { default: "..." },
		required: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		debounce: { default: 300 },
		resetSearchOnSelect: { type: Boolean },
		emptyOptionsText: { default: "Nothing found" },
		groupPosition: { default: void 0 }
	},
	emits: ["update:modelValue"],
	setup(v, { emit: N }) {
		let P = N, F = (e) => P("update:modelValue", e), I = ie(), L = v, R = x(), z = x(), B = ae("overlay"), V = b({
			search: "",
			activeOption: -1,
			open: !1,
			optionsHeight: 0
		});
		O(() => V.open, (e) => {
			e || (V.search = "");
		}, { flush: "sync" });
		let H = f(() => Array.isArray(L.modelValue) ? L.modelValue : []), _e = f(() => V.open && L.modelValue.length > 0 ? L.placeholder : L.modelValue.length > 0 ? "" : L.placeholder), U = T(L, "debounce"), W = l(() => [
			V.search,
			V.open,
			L.sourceId
		], async ([e, t]) => L.optionsSearch(e, "label"), {
			filterWatchResult: ([e, t]) => t,
			debounce: U
		}), G = l(() => [L.modelValue, L.sourceId], async ([e]) => L.optionsSearch(e, "value"), { debounce: U }), ve = f(() => {
			let e = G.value ?? [], t = W.value ?? [], n = /* @__PURE__ */ new Set(), r = [], i = (e) => {
				for (let t of e) {
					let e = se(t.value);
					n.has(e) || (n.add(e), r.push(t));
				}
			};
			return i(e), i(t), r;
		}), K = f(() => H.value.map((e) => ve.value.find((t) => s(t.value, e))).filter((e) => e !== void 0)), q = f(() => {
			let e = E(H);
			return [...W.value ?? []].map((t) => ({
				...t,
				selected: c(e, t.value)
			}));
		}), J = f(() => W.loading || G.loading), Y = f(() => G.value === void 0 ? !0 : L.disabled), ye = f(() => Y.value ? void 0 : "0"), be = () => {
			V.activeOption = 0;
		}, X = (e) => {
			let t = E(H);
			F(c(t, e) ? t.filter((t) => !s(t, e)) : [...t, e]), L.resetSearchOnSelect && (V.search = ""), z.value?.focus();
		}, Z = (e) => F(E(H).filter((t) => !s(t, e))), xe = () => z.value?.focus(), Se = () => V.open = !V.open, Q = (e) => {
			let t = e.relatedTarget;
			!R.value?.contains(t) && !B.value?.listRef?.contains(t) && (V.open = !1);
		}, Ce = (e) => {
			let { open: t, activeOption: n } = V;
			if (!t) {
				e.code === "Enter" && (V.open = !0);
				return;
			}
			e.code === "Escape" && (V.open = !1, z.value?.focus());
			let r = E(q), { length: i } = r;
			if (!i) return;
			[
				"ArrowDown",
				"ArrowUp",
				"Enter"
			].includes(e.code) && e.preventDefault(), e.code === "Enter" && X(r[n].value);
			let a = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
			V.activeOption = Math.abs(n + a + i) % i, requestAnimationFrame(() => B.value?.scrollIntoActive());
		};
		o(R), O(() => L.modelValue, () => be(), { immediate: !0 });
		let $ = f(() => {
			if (!J.value) {
				if (W.error) return n(W.error);
				if (G.error) return n(G.error);
				if (L.error) return n(L.error);
				if (L.modelValue.length && K.value.length !== L.modelValue.length) return "The selected values are not one of the options";
			}
		});
		return (n, o) => (y(), h("div", {
			class: "pl-autocomplete-multi__envelope",
			onClick: xe
		}, [g("div", {
			ref_key: "rootRef",
			ref: R,
			tabindex: ye.value,
			class: re(["pl-autocomplete-multi", {
				open: V.open,
				error: !!$.value,
				disabled: Y.value
			}]),
			onKeydown: Ce,
			onFocusout: Q
		}, [g("div", le, [
			g("div", ue, [
				oe(g("input", {
					ref_key: "inputRef",
					ref: z,
					"onUpdate:modelValue": o[0] ||= (e) => V.search = e,
					type: "text",
					tabindex: "-1",
					disabled: Y.value,
					placeholder: _e.value,
					spellcheck: "false",
					autocomplete: "chrome-off",
					onFocus: o[1] ||= (e) => V.open = !0
				}, null, 40, de), [[D, V.search]]),
				V.open ? m("", !0) : (y(), h("div", fe, [(y(!0), h(d, null, S(K.value, (e, t) => (y(), p(E(u), {
					key: t,
					closeable: "",
					small: "",
					onClick: o[2] ||= A((e) => V.open = !0, ["stop"]),
					onClose: (t) => Z(e.value)
				}, {
					default: k(() => [_(w(e.label || e.value), 1)]),
					_: 2
				}, 1032, ["onClose"]))), 128))])),
				g("div", pe, [
					J.value ? (y(), p(E(i), {
						key: 0,
						name: "loading"
					})) : m("", !0),
					C(n.$slots, "append"),
					g("div", {
						class: "pl-autocomplete-multi__arrow-wrapper",
						onClick: A(Se, ["stop"])
					}, [...o[3] ||= [g("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
				])
			]),
			v.label ? (y(), h("label", me, [
				v.required ? (y(), p(E(r), {
					key: 0,
					uri: E(te)
				}, null, 8, ["uri"])) : m("", !0),
				g("span", null, w(v.label), 1),
				E(I).tooltip ? (y(), p(E(t), {
					key: 1,
					class: "info",
					position: "top"
				}, {
					tooltip: k(() => [C(n.$slots, "tooltip")]),
					_: 3
				})) : m("", !0)
			])) : m("", !0),
			V.open ? (y(), p(ee, {
				key: 1,
				ref_key: "overlay",
				ref: B,
				root: R.value,
				class: "pl-autocomplete-multi__options",
				gap: 5,
				tabindex: "-1",
				onFocusout: Q
			}, {
				default: k(() => [
					g("div", he, [(y(!0), h(d, null, S(K.value, (e, t) => (y(), p(E(u), {
						key: t,
						closeable: "",
						small: "",
						onClose: (t) => Z(e.value)
					}, {
						default: k(() => [_(w(e.label || e.value), 1)]),
						_: 2
					}, 1032, ["onClose"]))), 128))]),
					(y(!0), h(d, null, S(q.value, (t, n) => (y(), p(e, {
						key: n,
						option: t,
						"text-item": "text",
						"is-selected": t.selected,
						"is-hovered": V.activeOption == n,
						size: "medium",
						"use-checkbox": "",
						onClick: A((e) => X(t.value), ["stop"])
					}, null, 8, [
						"option",
						"is-selected",
						"is-hovered",
						"onClick"
					]))), 128)),
					!q.value.length && !J.value ? (y(), h("div", ge, w(v.emptyOptionsText), 1)) : m("", !0)
				]),
				_: 1
			}, 8, ["root"])) : m("", !0),
			ne(a, {
				class: "pl-autocomplete-multi__contour",
				"group-position": v.groupPosition
			}, null, 8, ["group-position"])
		])], 42, ce), $.value ? (y(), h("div", j, w($.value), 1)) : v.helper ? (y(), h("div", M, w(v.helper), 1)) : m("", !0)]));
	}
});
export { N as default };

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