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