import { defineComponent as A, ref as l, inject as D, computed as W, watchEffect as z, onMounted as R, onUnmounted as U, createElementBlock as j, openBlock as C, Fragment as $, createCommentVNode as q, createVNode as g, unref as b, normalizeClass as G, createElementVNode as B, Transition as J, withCtx as K, withDirectives as Q, vShow as X } from "vue";
import Y from "../../../node_modules/vue3-emoji-picker-ru/dist/emoji-picker.es.js";
/* empty css                                                        */
import { useMessageDraft as Z } from "../../../hooks/useMessageDraft.js";
import "../../../hooks/useSearchModel.js";
import "../../../hooks/useTheme.js";
/* empty css                              */
/* empty css                                              */
import "../../../node_modules/linkifyjs/dist/linkify.js";
import "../../../node_modules/linkify-string/dist/linkify-string.js";
import "../../../functions/parseMarkdown.js";
import ee from "./icons/SmilesIcon.vue.js";
const ve = /* @__PURE__ */ A({
  __name: "ButtonEmojiPicker",
  props: {
    state: {
      type: String,
      default: "active"
    },
    mode: {
      type: String,
      default: "click",
      // или 'hover'
      validator: (r) => ["click", "hover"].includes(r)
    },
    native: {
      type: Boolean,
      default: !0
    }
  },
  setup(r) {
    const t = r, v = l(null), f = l(null), o = l(!1), M = l("light"), i = D("chatAppId"), { setMessageText: P, getMessage: E } = Z(i), c = l("#5F5F5F"), u = l("#404040"), h = l(!1);
    let a = null;
    const p = () => {
      if (!i) {
        c.value = "#5F5F5F", u.value = "#404040";
        return;
      }
      const e = document.getElementById(i);
      if (!e) {
        c.value = "#5F5F5F", u.value = "#404040";
        return;
      }
      const n = window.getComputedStyle(e), d = n.getPropertyValue("--chotto-buttonemojipicker-button-span-color").trim(), H = n.getPropertyValue("--chotto-buttonemojipicker-button-span-hover-color").trim();
      c.value = d || "#5F5F5F", u.value = H || "#404040";
    }, w = W(() => h.value ? u.value : c.value);
    z(() => {
      p();
    });
    let s = !1, m = !1;
    const I = () => {
      var n;
      const e = document.getElementById(i);
      return (n = e == null ? void 0 : e.getAttribute("data-theme")) != null && n.includes("dark") ? "dark" : "light";
    }, S = (e) => {
      P(E().text + e.i), t.mode === "click" && (o.value = !1);
    }, y = () => {
      t.state === "active" && (M.value = I(), o.value = !0);
    }, k = () => {
      o.value = !1;
    }, _ = () => {
      t.mode === "click" && (o.value = !o.value, o.value && y());
    }, T = () => {
      t.mode === "hover" && (s = !0, y());
    }, V = () => {
      t.mode === "hover" && (s = !1, setTimeout(() => {
        !m && !s && k();
      }, 150));
    }, x = () => {
      h.value = !0, T();
    }, L = () => {
      h.value = !1, V();
    }, N = () => {
      t.mode === "hover" && (m = !0);
    }, O = () => {
      t.mode === "hover" && (m = !1, setTimeout(() => {
        !s && !m && k();
      }, 150));
    }, F = (e) => {
      t.mode === "click" && o.value && f.value && v.value && e.target instanceof Node && !f.value.contains(e.target) && !v.value.contains(e.target) && k();
    };
    return R(() => {
      if (document.addEventListener("click", F), p(), i) {
        const e = document.getElementById(i);
        e && (a = new MutationObserver((n) => {
          n.forEach((d) => {
            d.type === "attributes" && d.attributeName === "data-theme" && p();
          });
        }), a.observe(e, {
          attributes: !0,
          attributeFilter: ["data-theme"]
        }));
      }
    }), U(() => {
      document.removeEventListener("click", F), a && (a.disconnect(), a = null);
    }), (e, n) => (C(), j($, null, [
      b(E)().isRecording ? q("", !0) : (C(), j("button", {
        key: 0,
        ref_key: "emojiButton",
        ref: f,
        class: G(["button", { "button-disabled": r.state === "disabled" }]),
        onClick: _,
        onMouseenter: x,
        onMouseleave: L
      }, [
        B("span", null, [
          g(b(ee), { fill: w.value }, null, 8, ["fill"])
        ])
      ], 34)),
      g(J, null, {
        default: K(() => [
          Q(B("div", {
            ref_key: "emoji",
            ref: v,
            class: "emoji",
            onMouseenter: N,
            onMouseleave: O
          }, [
            g(b(Y), {
              native: r.native,
              theme: M.value,
              "picker-type": "",
              onSelect: S
            }, null, 8, ["native", "theme"])
          ], 544), [
            [X, o.value]
          ])
        ]),
        _: 1
      })
    ], 64));
  }
});
export {
  ve as default
};
