import { defineComponent as w, ref as m, useColor as f, useGun as x, useUser as y, watchEffect as k, watch as B, openBlock as s, createElementBlock as r, createVNode as N, unref as n, toDisplayString as p, createCommentVNode as v, normalizeStyle as b, renderSlot as z, theme as C, selectedUser as A } from "./composables-108ad332.js";
import { AccountAvatar as S } from "./components.js";
import { _export_sfc as D } from "./_plugin-vue_export-helper-6a641814.js";
const $ = ["title"], E = {
  key: 0,
  class: "mx-2 font-bold text-sm max-w-8ch overflow-ellipsis overflow-hidden whitespace-nowrap"
}, U = /* @__PURE__ */ w({
  __name: "AccountBadge",
  props: {
    pub: { type: String, default: "" },
    showName: { type: Boolean, default: !0 },
    size: { type: Number, default: 30 },
    selectable: Boolean,
    vertical: Boolean
  },
  setup(e) {
    const l = e, t = m(""), a = m(""), u = f("deep"), h = f("light"), c = x(), { user: i } = y();
    k(() => {
      t.value = "", a.value = "", c.user(l.pub).get("profile").get("name").on((o) => {
        t.value = o;
      }), c.user().get("petnames").get(l.pub).on(async (o) => {
        a.value = await i.decrypt(o);
      });
    }), B(() => i.is, (o) => {
      o || (t.value = "", a.value = "");
    });
    function g() {
      l.selectable && (A.pub = l.pub);
    }
    return (o, d) => (s(), r("div", {
      class: "frame p-2px flex items-center rounded-full bg-light-900 dark-bg-dark-200 cursor-pointer shadow transition duration-400 ease-in",
      style: b({ backgroundColor: e.pub ? n(C).dark ? n(u).hex(e.pub) : n(h).hex(e.pub) : "transparent", flexDirection: e.vertical ? "column" : "row" }),
      title: e.showName ? a.value ? a.value : e.pub : t.value,
      onClick: d[0] || (d[0] = (V) => g())
    }, [
      N(n(S), {
        pub: e.pub,
        size: e.size
      }, null, 8, ["pub", "size"]),
      e.showName && t.value ? (s(), r("div", E, p(t.value), 1)) : v("", !0),
      t.value && !e.showName ? (s(), r("div", {
        key: 1,
        class: "tip mx-2 font-bold text-sm max-w-8ch overflow-ellipsis overflow-hidden whitespace-nowrap absolute opacity-0 hover-opacity-100 transition-all duration-300 ease-in text-center transform translate-y-2 p-1 rounded-lg",
        style: b({ transform: `translateY(${-e.size - 5}px) translateX(-50%)`, backgroundColor: n(u).hex(e.pub) })
      }, p(t.value), 5)) : v("", !0),
      z(o.$slots, "default", {}, void 0, !0)
    ], 12, $));
  }
});
const X = /* @__PURE__ */ D(U, [["__scopeId", "data-v-b7b96d95"]]);
export {
  X as default
};
//# sourceMappingURL=AccountBadge-8e6c47d6.js.map
