import { defineComponent as se, inject as re, ref as m, computed as f, onMounted as le, onUnmounted as ce, createElementBlock as l, openBlock as s, normalizeClass as x, unref as o, createCommentVNode as de, createVNode as k, createBlock as ue, Fragment as Q, renderList as A, createElementVNode as r, toDisplayString as g, Transition as T, withCtx as w, withDirectives as L, normalizeStyle as N, withModifiers as O, vShow as F, Teleport as me } from "vue";
import fe from "../../../node_modules/vue3-emoji-picker-ru/dist/emoji-picker.es.js";
/* empty css                                                        */
import { QUICK_REACTION_EMOJIS as ke } from "./utils/quickReactions.js";
import { isRightMessage as ge } from "./composables/usePositioning.js";
import { useReactionsState as pe } from "./composables/useReactionsState.js";
import { useReactionsPanel as ye } from "./composables/useReactionsPanel.js";
const ve = ["title", "onClick"], Re = { class: "message-reactions__emoji" }, be = { class: "message-reactions__count" }, he = ["title", "onClick"], Be = /* @__PURE__ */ se({
  __name: "MessageReactions",
  props: {
    reactions: {
      type: Object,
      required: !1,
      default: void 0
    },
    messageId: {
      type: [String, Number],
      required: !0
    },
    readonly: {
      type: Boolean,
      default: !1
    },
    enabled: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["toggle-reaction", "add-reaction", "remove-reaction"],
  setup(i, { emit: j }) {
    const a = i, c = j, p = re("chatAppId"), u = m(null), y = m(null), v = m("light"), R = f(() => ke), b = pe(f(() => a.reactions)), { displayedReactions: D, hasReactions: V, addReaction: h, removeReaction: z, toggleReaction: U } = b, $ = ye(R, y), {
      isQuickReactionsOpen: C,
      isFullPickerOpen: I,
      pickerRef: J,
      quickReactionsRef: K,
      quickPanelStyle: G,
      pickerStyle: H,
      openQuickPanel: W,
      closeQuickPanel: M,
      openFullPicker: X,
      closeFullPicker: Y,
      handleQuickPanelMouseEnter: E,
      handleQuickPanelMouseLeave: P,
      handlePickerMouseEnter: _,
      handlePickerMouseLeave: S,
      handleClickOutside: B
    } = $, Z = f(() => u.value ? ge(u.value) : !1), ee = () => {
      var n;
      if (!p) return "light";
      const t = document.getElementById(p);
      return (n = t == null ? void 0 : t.getAttribute("data-theme")) != null && n.includes("dark") ? "dark" : "light";
    };
    function te(t) {
      a.readonly || !a.enabled || (U(t), c("toggle-reaction", { messageId: a.messageId, key: t }));
    }
    function ne() {
      a.readonly || !a.enabled || (C.value ? M() : W());
    }
    function oe(t) {
      var e, d;
      if (a.readonly || !a.enabled) return;
      ((d = (e = b.localReactions.value) == null ? void 0 : e.items) == null ? void 0 : d.find((q) => q.key === t && q.reactedByMe)) ? (z(t), c("remove-reaction", { messageId: a.messageId, key: t })) : (h(t), c("add-reaction", { messageId: a.messageId, key: t })), M();
    }
    async function ae() {
      a.readonly || !a.enabled || (v.value = ee(), await X());
    }
    function ie(t) {
      Y(), !(a.readonly || !a.enabled) && (h(t.i), c("add-reaction", { messageId: a.messageId, key: t.i }));
    }
    return le(() => {
      document.addEventListener("click", B);
    }), ce(() => {
      document.removeEventListener("click", B);
    }), (t, n) => (s(), l("div", {
      ref_key: "reactionsContainerRef",
      ref: u,
      class: x(["message-reactions", { "has-reactions": o(V), "is-right-message": Z.value, "is-disabled": !i.enabled }])
    }, [
      (s(!0), l(Q, null, A(o(D), (e) => (s(), l("button", {
        key: e.key,
        class: x(["message-reactions__chip", { "is-active": e.reactedByMe }]),
        title: e.key,
        onClick: (d) => te(e.key)
      }, [
        r("span", Re, g(e.key), 1),
        r("span", be, g(e.count), 1)
      ], 10, ve))), 128)),
      !i.readonly && i.enabled ? (s(), l("button", {
        key: 0,
        ref_key: "addButtonRef",
        ref: y,
        class: "message-reactions__add",
        "aria-label": "Add reaction",
        title: "Добавить реакцию",
        onClick: ne
      }, [...n[4] || (n[4] = [
        r("span", null, "+", -1)
      ])], 512)) : de("", !0),
      k(T, { name: "message-reactions-popover" }, {
        default: w(() => [
          L(r("div", {
            ref_key: "quickReactionsRef",
            ref: K,
            class: "message-reactions__quick-panel",
            style: N(o(G)),
            onMouseenter: n[0] || (n[0] = //@ts-ignore
            (...e) => o(E) && o(E)(...e)),
            onMouseleave: n[1] || (n[1] = //@ts-ignore
            (...e) => o(P) && o(P)(...e))
          }, [
            (s(!0), l(Q, null, A(R.value, (e) => (s(), l("button", {
              key: e,
              class: "message-reactions__quick-item",
              title: e,
              onClick: O((d) => oe(e), ["stop"])
            }, g(e), 9, he))), 128)),
            r("button", {
              class: "message-reactions__expand",
              title: "Развернуть",
              onClick: O(ae, ["stop"])
            }, [...n[5] || (n[5] = [
              r("span", null, "⋯", -1)
            ])])
          ], 36), [
            [F, o(C) && !i.readonly && i.enabled && !o(I)]
          ])
        ]),
        _: 1
      }),
      (s(), ue(me, { to: "body" }, [
        k(T, { name: "message-reactions-popover" }, {
          default: w(() => [
            L(r("div", {
              ref_key: "pickerRef",
              ref: J,
              class: "message-reactions__picker",
              style: N(o(H)),
              onMouseenter: n[2] || (n[2] = //@ts-ignore
              (...e) => o(_) && o(_)(...e)),
              onMouseleave: n[3] || (n[3] = //@ts-ignore
              (...e) => o(S) && o(S)(...e))
            }, [
              k(o(fe), {
                native: !0,
                theme: v.value,
                "picker-type": "",
                onSelect: ie
              }, null, 8, ["theme"])
            ], 36), [
              [F, o(I) && !i.readonly && i.enabled]
            ])
          ]),
          _: 1
        })
      ]))
    ], 2));
  }
});
export {
  Be as default
};
