import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { getEmojiShortCode as t } from "../../common/emoji/index.js";
import { DialtoneLocalization as n } from "../../localization/index.js";
import r from "../button/button.js";
import i from "../tooltip/tooltip.js";
import a from "../emoji/emoji.js";
import o from "../emoji-text-wrapper/emoji-text-wrapper.js";
import { REACTIONS_ATTRIBUTES as s } from "./emoji-row-constants.js";
import { Fragment as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, resolveComponent as _, toDisplayString as v, withCtx as y } from "vue";
//#region recipes/conversation_view/emoji_row/emoji_row.vue
var b = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeEmojiRow",
	components: {
		DtTooltip: i,
		DtButton: r,
		DtEmoji: a,
		DtEmojiTextWrapper: o
	},
	props: { reactions: {
		type: Array,
		default: () => [],
		validator: (e) => {
			for (let t of e) if (!s.every((e) => t[e] !== void 0)) return !1;
			return !0;
		}
	} },
	emits: ["emoji-clicked", "emoji-hovered"],
	data() {
		return { i18n: new n() };
	},
	methods: {
		emojiClicked(e) {
			this.$emit("emoji-clicked", e.emojiUnicodeOrShortname);
		},
		emojiHovered(e, t) {
			this.$emit("emoji-hovered", {
				reaction: e.emojiUnicodeOrShortname,
				state: t
			});
		},
		reactionLabel(e) {
			return this.i18n.$t("DIALTONE_EMOJI_ROW_REACTION_LABEL", {
				reaction: t(e.emojiUnicodeOrShortname),
				personCount: e.num
			});
		}
	}
}, x = { class: "d-recipe-emoji-row" }, S = { "aria-hidden": "true" }, C = { class: "d-recipe-emoji-row__tooltip-emoji" }, w = { class: "d-recipe-emoji-row__tooltip-names" }, T = ["textContent"], E = { class: "d-recipe-emoji-row__emoji" }, D = { class: "d-recipe-emoji-row__reaction-number" };
function O(e, t, n, r, i, a) {
	let o = _("dt-emoji-text-wrapper"), s = _("dt-emoji"), b = _("dt-button"), O = _("dt-tooltip");
	return m(), l("span", x, [(m(!0), l(c, null, h(n.reactions, (e) => (m(), l("span", { key: e.unicodeOutput }, [f(O, {
		class: "d-recipe-emoji-row__tooltip",
		"content-class": "d-recipe-emoji-row__tooltip-content",
		"fallback-placements": ["top", "bottom"],
		sticky: "popper",
		onShown: (t) => a.emojiHovered(e, t)
	}, {
		anchor: y(({ attrs: t }) => [f(b, {
			importance: "clear",
			size: "sm",
			"data-qa": "feed-item-reaction-button",
			class: p(["d-recipe-emoji-row__reaction", e.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""]),
			"aria-label": a.reactionLabel(e),
			attrs: t,
			onClick: (t) => a.emojiClicked(e)
		}, {
			default: y(() => [u("span", E, [f(s, {
				class: "d-recipe-emoji-row__emoji",
				size: "200",
				"img-class": "d-recipe-emoji-row__emoji-img",
				code: e.emojiUnicodeOrShortname
			}, null, 8, ["code"])]), u("span", D, v(e.num), 1)]),
			_: 2
		}, 1032, [
			"class",
			"aria-label",
			"attrs",
			"onClick"
		])]),
		default: y(() => [u("span", S, [f(o, { size: "800" }, {
			default: y(() => [
				u("p", C, v(e.emojiUnicodeOrShortname), 1),
				t[0] || (t[0] = u("br", null, null, -1)),
				u("p", w, [d(v(e.names) + " ", 1), u("span", {
					class: "d-recipe-emoji-row__tooltip-label",
					textContent: v(a.reactionLabel(e))
				}, null, 8, T)])
			]),
			_: 2
		}, 1024)])]),
		_: 2
	}, 1032, ["onShown"])]))), 128)), g(e.$slots, "picker")]);
}
var k = /* @__PURE__ */ e(b, [["render", O]]);
//#endregion
export { k as default };

//# sourceMappingURL=emoji-row.js.map