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