import { defineComponent as Pe, ref as i, inject as Ee, computed as d, watchEffect as Fe, watch as z, onMounted as Le, onUnmounted as Ue, createElementBlock as a, openBlock as o, Fragment as X, createCommentVNode as C, createVNode as P, unref as E, normalizeClass as Q, createElementVNode as F, Transition as Z, withCtx as x, withDirectives as $e, renderList as ee, toDisplayString as te, vShow as Oe, normalizeStyle as Ae } from "vue";
import { useMessageDraft as Be } 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 se from "./icons/StickerIcon.vue.js";
import { isAnimatedSticker as L } from "../../2_feed_elements/StickerMessage/utils/stickerUtils.js";
import "../../2_feed_elements/StickerMessage/utils/suppress-lit-warning.js";
const De = { class: "sticker-picker__container" }, We = ["onClick", "onMouseenter", "onMouseleave"], Ne = ["src"], Ve = ["src", "alt"], Re = {
  key: 2,
  class: "sticker-picker__tab-icon-placeholder"
}, He = { class: "sticker-picker__content" }, Ie = {
  key: 0,
  class: "sticker-picker__empty"
}, je = {
  key: 1,
  class: "sticker-picker__grid"
}, ze = ["onClick", "onMouseenter"], Xe = ["src"], Ye = ["src", "alt"], Ge = ["src"], Ke = ["src", "alt"], qe = {
  key: 2,
  class: "sticker-picker__preview-label"
}, Je = 700, nt = /* @__PURE__ */ Pe({
  __name: "StickerPicker",
  props: {
    state: { default: "active" },
    mode: { default: "click" },
    stickers: { default: () => [] },
    emptyText: { default: "Нет доступных стикеров" }
  },
  setup(U) {
    const l = U, $ = i(null), O = i(null), A = i(null), B = i(null), u = i(!1), p = i(0), m = Ee("chatAppId"), { getMessage: re, setMessageFile: le, setForceSendMessage: ae } = Be(m), y = i("#5F5F5F"), b = i("#404040"), D = i(!1);
    let h = null;
    const W = () => {
      if (!m) {
        y.value = "#5F5F5F", b.value = "#404040";
        return;
      }
      const e = document.getElementById(m);
      if (!e) {
        y.value = "#5F5F5F", b.value = "#404040";
        return;
      }
      const t = window.getComputedStyle(e), s = t.getPropertyValue("--chotto-stickerpicker-button-span-color").trim(), r = t.getPropertyValue("--chotto-stickerpicker-button-span-hover-color").trim();
      y.value = s || "#5F5F5F", b.value = r || "#404040";
    }, oe = d(() => D.value ? b.value : y.value);
    Fe(() => {
      W();
    });
    const n = i(null), N = i({}), w = i(null), v = i(/* @__PURE__ */ new Map()), k = i(/* @__PURE__ */ new Map());
    let T = !1, M = !1;
    const f = i(!1), V = i(!1);
    async function Y() {
      if (!(f.value || V.value)) {
        V.value = !0;
        try {
          await import("../../2_feed_elements/StickerMessage/libs/tgs-player/lottie-player.esm.js"), await import("../../2_feed_elements/StickerMessage/libs/tgs-player/tgs-player.esm.js"), f.value = !0;
        } catch (e) {
          console.error("Failed to load TGS libraries:", e);
        } finally {
          V.value = !1;
        }
      }
    }
    const ie = () => {
      if (!l.stickers || !Array.isArray(l.stickers) || l.stickers.length === 0)
        return { hasTabs: !1, tabs: [] };
      const e = l.stickers[0], t = Array.isArray(e), s = e && typeof e == "object" && "stickers" in e;
      return t ? {
        hasTabs: !0,
        tabs: l.stickers.map((r, c) => ({
          id: `tab-${c}`,
          label: `Set ${c + 1}`,
          stickers: r,
          iconUrl: r && r.length > 0 ? r[0].url : null
        }))
      } : s && "stickers" in e ? {
        hasTabs: !0,
        tabs: l.stickers.map((r, c) => ({
          id: r.id || `tab-${c}`,
          label: r.label || `Set ${c + 1}`,
          stickers: r.stickers || [],
          iconUrl: r.iconUrl || (r.stickers && r.stickers.length > 0 ? r.stickers[0].url : null)
        }))
      } : {
        hasTabs: !0,
        tabs: [{
          id: "default",
          label: "Stickers",
          stickers: l.stickers,
          iconUrl: l.stickers.length > 0 ? l.stickers[0].url : null
        }]
      };
    }, R = d(() => ie()), ce = d(() => R.value.hasTabs && R.value.tabs.length > 0), _ = d(() => R.value.tabs), H = d(() => {
      var e;
      return _.value.length === 0 ? [] : ((e = _.value[p.value]) == null ? void 0 : e.stickers) || [];
    }), G = d(() => {
      const e = H.value.some((s) => L(s.url)), t = _.value.some((s) => s.iconUrl && L(s.iconUrl));
      return e || t;
    });
    z(G, (e) => {
      e && !f.value && Y();
    }, { immediate: !0 });
    const I = (e) => L(e.url), ne = (e, t) => {
      t ? v.value.set(e, t) : v.value.delete(e);
    }, ue = (e, t) => {
      t ? k.value.set(e, t) : k.value.delete(e);
    }, ve = (e) => {
      const t = k.value.get(e);
      t && typeof t.play == "function" && t.play();
    }, fe = (e) => {
      const t = k.value.get(e);
      t && typeof t.pause == "function" && t.pause();
    };
    z(p, () => {
      v.value.clear();
    }), z(() => l.stickers, () => {
      p.value >= _.value.length && (p.value = 0);
    }, { deep: !0 });
    const ke = (e) => {
      if (!e) return "image";
      const t = e.toLowerCase();
      return t.endsWith(".tgs") || t.endsWith(".webp") ? "sticker" : "image";
    }, K = (e) => {
      if (l.state === "disabled") return;
      const t = ke(e.url);
      le({
        url: e.url,
        name: e.alt || `sticker.${t === "sticker" ? e.url.toLowerCase().endsWith(".tgs") ? "tgs" : "webp" : "png"}`,
        type: t
      }), ae(!0), l.mode === "click" && (u.value = !1);
    }, pe = (e, t) => {
      if (I(e) && f.value) {
        const s = v.value.get(t);
        s && typeof s.play == "function" && s.play();
      }
      S(), w.value = setTimeout(() => {
        he(e);
      }, Je);
    }, de = () => {
      v.value.forEach((e) => {
        e && typeof e.pause == "function" && e.pause();
      }), S(), g();
    }, me = (e) => {
      S(), g(), K(e);
    }, S = () => {
      w.value && (clearTimeout(w.value), w.value = null);
    }, he = (e) => {
      n.value = e, N.value = {
        left: "50%",
        top: "50%",
        transform: "translate(-50%, -50%)"
      };
    }, g = () => {
      n.value = null, N.value = {};
    }, _e = () => {
      n.value && (K(n.value), g());
    }, q = () => {
      l.state === "active" && (u.value = !0);
    }, j = () => {
      v.value.forEach((e) => {
        e && typeof e.pause == "function" && e.pause();
      }), k.value.forEach((e) => {
        e && typeof e.pause == "function" && e.pause();
      }), u.value = !1;
    }, ge = () => {
      l.mode === "click" && (u.value = !u.value, u.value && q());
    }, ye = () => {
      l.mode === "hover" && (T = !0, q());
    }, be = () => {
      l.mode === "hover" && (T = !1, setTimeout(() => {
        !M && !T && j();
      }, 150));
    }, we = () => {
      D.value = !0, ye();
    }, Te = () => {
      D.value = !1, be();
    }, Me = () => {
      l.mode === "hover" && (M = !0);
    }, Se = () => {
      l.mode === "hover" && (M = !1, setTimeout(() => {
        !T && !M && j();
      }, 150));
    }, Ce = (e) => {
      if (!A.value) return;
      const t = e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
      A.value.scrollLeft += t;
    }, J = (e) => {
      l.mode === "click" && u.value && O.value && $.value && e.target instanceof Node && !O.value.contains(e.target) && !$.value.contains(e.target) && j(), n.value && B.value && e.target instanceof Node && !B.value.contains(e.target) && g();
    };
    return Le(() => {
      if (document.addEventListener("click", J), W(), m) {
        const e = document.getElementById(m);
        e && (h = new MutationObserver((t) => {
          t.forEach((s) => {
            s.type === "attributes" && s.attributeName === "data-theme" && W();
          });
        }), h.observe(e, {
          attributes: !0,
          attributeFilter: ["data-theme"]
        }));
      }
      G.value && !f.value && Y();
    }), Ue(() => {
      document.removeEventListener("click", J), S(), g(), h && (h.disconnect(), h = null), v.value.forEach((e) => {
        e && typeof e.pause == "function" && e.pause();
      }), v.value.clear(), k.value.forEach((e) => {
        e && typeof e.pause == "function" && e.pause();
      }), k.value.clear();
    }), (e, t) => (o(), a(X, null, [
      E(re)().isRecording ? C("", !0) : (o(), a("button", {
        key: 0,
        ref_key: "stickerButton",
        ref: O,
        class: Q(["button", { "button-disabled": U.state === "disabled" }]),
        onClick: ge,
        onMouseenter: we,
        onMouseleave: Te
      }, [
        F("span", null, [
          P(E(se), { fill: oe.value }, null, 8, ["fill"])
        ])
      ], 34)),
      P(Z, null, {
        default: x(() => [
          $e(F("div", {
            ref_key: "stickerPicker",
            ref: $,
            class: "sticker-picker",
            onMouseenter: Me,
            onMouseleave: Se
          }, [
            F("div", De, [
              ce.value ? (o(), a("div", {
                key: 0,
                ref_key: "tabsContainer",
                ref: A,
                class: "sticker-picker__tabs",
                onWheelPassive: Ce
              }, [
                (o(!0), a(X, null, ee(_.value, (s, r) => (o(), a("button", {
                  key: r,
                  class: Q(["sticker-picker__tab", { "sticker-picker__tab--active": p.value === r }]),
                  onClick: (c) => p.value = r,
                  onMouseenter: (c) => ve(r),
                  onMouseleave: (c) => fe(r)
                }, [
                  s.iconUrl && E(L)(s.iconUrl) && f.value ? (o(), a("tgs-player", {
                    key: 0,
                    ref_for: !0,
                    ref: (c) => ue(r, c),
                    src: s.iconUrl,
                    class: "sticker-picker__tab-icon sticker-picker__tab-icon-animated",
                    loop: "",
                    mode: "normal"
                  }, null, 8, Ne)) : s.iconUrl ? (o(), a("img", {
                    key: 1,
                    src: s.iconUrl,
                    alt: s.label || `Tab ${r + 1}`,
                    class: "sticker-picker__tab-icon"
                  }, null, 8, Ve)) : (o(), a("span", Re, [
                    P(E(se))
                  ]))
                ], 42, We))), 128))
              ], 544)) : C("", !0),
              F("div", He, [
                H.value.length === 0 ? (o(), a("div", Ie, te(U.emptyText), 1)) : (o(), a("div", je, [
                  (o(!0), a(X, null, ee(H.value, (s, r) => (o(), a("button", {
                    key: r,
                    class: "sticker-picker__item",
                    onClick: (c) => me(s),
                    onMouseenter: (c) => pe(s, r),
                    onMouseleave: de
                  }, [
                    I(s) && f.value ? (o(), a("tgs-player", {
                      key: 0,
                      ref_for: !0,
                      ref: (c) => ne(r, c),
                      src: s.url,
                      class: "sticker-picker__image sticker-picker__image-animated",
                      loop: "",
                      mode: "normal"
                    }, null, 8, Xe)) : (o(), a("img", {
                      key: 1,
                      src: s.url,
                      alt: s.alt || `Sticker ${r + 1}`,
                      class: "sticker-picker__image"
                    }, null, 8, Ye))
                  ], 40, ze))), 128))
                ]))
              ])
            ])
          ], 544), [
            [Oe, u.value]
          ])
        ]),
        _: 1
      }),
      P(Z, { name: "preview" }, {
        default: x(() => [
          n.value ? (o(), a("div", {
            key: 0,
            ref_key: "previewElement",
            ref: B,
            class: "sticker-picker__preview",
            style: Ae(N.value),
            onClick: _e
          }, [
            I(n.value) && f.value ? (o(), a("tgs-player", {
              key: 0,
              src: n.value.url,
              class: "sticker-picker__preview-image sticker-picker__preview-image-animated",
              autoplay: "",
              loop: "",
              mode: "normal"
            }, null, 8, Ge)) : (o(), a("img", {
              key: 1,
              src: n.value.url,
              alt: n.value.alt || "Preview",
              class: "sticker-picker__preview-image"
            }, null, 8, Ke)),
            n.value.alt ? (o(), a("div", qe, te(n.value.alt), 1)) : C("", !0)
          ], 4)) : C("", !0)
        ]),
        _: 1
      })
    ], 64));
  }
});
export {
  nt as default
};
