import { defineComponent as x, ref as m, watchEffect as y, watch as k, resolveComponent as B, openBlock as r, createElementBlock as s, normalizeStyle as f, unref as l, createVNode as C, toDisplayString as p, createCommentVNode as v, renderSlot as N } from "vue";
import { useColor as b, useGun as z, useUser as S, SEA as A, theme as D, selectedUser as E } from "./composables-5f691338.js";
import { _export_sfc as $ } from "./_plugin-vue_export-helper-6a641814.js";
const U = ["title"], V = {
  key: 0,
  class: "mx-2 font-bold text-sm max-w-8ch overflow-ellipsis overflow-hidden whitespace-nowrap"
}, G = /* @__PURE__ */ x({
  __name: "AccountBadge",
  props: {
    pub: { type: String, default: "" },
    showName: { type: Boolean, default: !0 },
    size: { type: Number, default: 30 },
    selectable: Boolean,
    vertical: Boolean
  },
  setup(e) {
    const n = e, t = m(""), a = m(""), u = b("deep"), h = b("light"), c = z(), { user: i } = S();
    y(() => {
      t.value = "", a.value = "", c.user(n.pub).get("profile").get("name").on((o) => {
        t.value = o;
      }), c.user().get("petnames").get(n.pub).on(async (o) => {
        a.value = await A.decrypt(o, i.pair());
      });
    }), k(() => i.is, (o) => {
      o || (t.value = "", a.value = "");
    });
    function g() {
      n.selectable && (E.pub = n.pub);
    }
    return (o, d) => {
      const w = B("account-avatar");
      return r(), s("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: f({ backgroundColor: e.pub ? l(D).dark ? l(u).hex(e.pub) : l(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] = (I) => g())
      }, [
        C(w, {
          pub: e.pub,
          size: e.size
        }, null, 8, ["pub", "size"]),
        e.showName && t.value ? (r(), s("div", V, p(t.value), 1)) : v("", !0),
        t.value && !e.showName ? (r(), s("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: f({ transform: `translateY(${-e.size - 5}px) translateX(-50%)`, backgroundColor: l(u).hex(e.pub) })
        }, p(t.value), 5)) : v("", !0),
        N(o.$slots, "default", {}, void 0, !0)
      ], 12, U);
    };
  }
});
const j = /* @__PURE__ */ $(G, [["__scopeId", "data-v-938c4fcd"]]);
export {
  j as default
};
//# sourceMappingURL=AccountBadge-91f3e799.js.map
