import { REACTIONS_ATTRIBUTES as w } from "./emoji-row-constants.js";
import { DialtoneLocalization as E } from "../../localization/index.js";
import { resolveComponent as i, openBlock as m, createElementBlock as s, Fragment as k, renderList as O, createVNode as n, withCtx as a, normalizeClass as S, createElementVNode as d, toDisplayString as p, createTextVNode as v, renderSlot as C } from "vue";
import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import D from "../tooltip/tooltip.js";
import T from "../button/button.js";
import L from "../emoji/emoji.js";
import x from "../emoji-text-wrapper/emoji-text-wrapper.js";
const I = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeEmojiRow",
  components: { DtTooltip: D, DtButton: T, DtEmoji: L, DtEmojiTextWrapper: x },
  props: {
    /**
     * Provide an array of reaction objects to be shown.
     */
    reactions: {
      type: Array,
      default: () => [],
      validator: (e) => {
        for (const t of e)
          if (!w.every((_) => t[_] !== void 0)) return !1;
        return !0;
      }
    }
  },
  emits: [
    "emoji-clicked",
    "emoji-hovered"
  ],
  data() {
    return {
      i18n: new E()
    };
  },
  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", {
        names: e.names,
        reaction: e.emojiUnicodeOrShortname
      });
    }
  }
}, y = { class: "d-recipe-emoji-row" }, A = { "aria-hidden": "true" }, N = { class: "d-recipe-emoji-row__emoji" }, R = { class: "d-recipe-emoji-row__reaction-number" };
function z(e, t, l, _, B, r) {
  const u = i("dt-emoji-text-wrapper"), j = i("dt-emoji"), f = i("dt-button"), h = i("dt-tooltip");
  return m(), s("span", y, [
    (m(!0), s(k, null, O(l.reactions, (o) => (m(), s("span", {
      key: o.unicodeOutput
    }, [
      n(h, {
        class: "d-recipe-emoji-row__tooltip",
        "content-class": "d-recipe-emoji-row__tooltip-content",
        sticky: "popper",
        onShown: (c) => r.emojiHovered(o, c)
      }, {
        anchor: a(({ attrs: c }) => [
          n(f, {
            importance: "clear",
            size: "sm",
            "data-qa": "feed-item-reaction-button",
            class: S([
              "d-recipe-emoji-row__reaction",
              o.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""
            ]),
            "aria-label": r.reactionLabel(o),
            attrs: c,
            onClick: (U) => r.emojiClicked(o)
          }, {
            default: a(() => [
              d("span", N, [
                n(j, {
                  size: "200",
                  code: o.emojiUnicodeOrShortname
                }, null, 8, ["code"])
              ]),
              d("span", R, p(o.num), 1)
            ]),
            _: 2
          }, 1032, ["class", "aria-label", "attrs", "onClick"])
        ]),
        default: a(() => [
          d("span", A, [
            n(u, { size: "200" }, {
              default: a(() => [
                v(p(r.reactionLabel(o)), 1)
              ]),
              _: 2
            }, 1024)
          ])
        ]),
        _: 2
      }, 1032, ["onShown"])
    ]))), 128)),
    C(e.$slots, "picker")
  ]);
}
const J = /* @__PURE__ */ b(I, [["render", z]]);
export {
  J as default
};
//# sourceMappingURL=emoji-row.js.map
