import { defineComponent as _, ref as b, resolveComponent as u, openBlock as s, createElementBlock as n, createVNode as p, unref as g, withCtx as x, createElementVNode as y, withModifiers as h } from "vue";
import { useUser as k, useGun as z, hashText as C } from "./composables-5f691338.js";
const N = { class: "flex flex-col relative items-center justify-center" }, w = { class: "text-2xl" }, A = {
  key: 0,
  class: "i-la-camera"
}, E = /* @__PURE__ */ _({
  __name: "UserAvatar",
  props: {
    size: { type: Number, default: 120 },
    pic: { type: Number, default: 200 }
  },
  setup(r) {
    const v = r, { user: a } = k(), c = z(), o = b(null);
    a.db.get("avatar").on((t) => {
      t ? c.get("#avatars").get(t).once((e) => {
        o.value = e;
      }) : o.value = null;
    });
    async function d(t) {
      if (t) {
        const e = await C(t);
        c.get("#avatars").get(e).put(t), a.db.get("avatar").put(e);
      } else
        i();
    }
    function i() {
      a.db.get("avatar").put(null);
    }
    return (t, e) => {
      const f = u("account-avatar"), m = u("form-picture");
      return s(), n("div", N, [
        p(f, {
          pub: g(a).pub,
          size: r.size
        }, null, 8, ["pub", "size"]),
        p(m, {
          class: "absolute",
          options: { picSize: v.pic, preserveRatio: !1 },
          onUpdate: e[1] || (e[1] = (l) => d(l))
        }, {
          default: x(() => [
            y("div", w, [
              o.value ? (s(), n("div", {
                key: 1,
                class: "i-la-trash-alt",
                onClick: e[0] || (e[0] = h((l) => i(), ["stop", "prevent"]))
              })) : (s(), n("div", A))
            ])
          ]),
          _: 1
        }, 8, ["options"])
      ]);
    };
  }
});
export {
  E as default
};
//# sourceMappingURL=UserAvatar-1bd7708b.js.map
