import { defineComponent as _, useColor as p, useUser as h, ref as v, useRefHistory as C, unref as n, openBlock as r, createElementBlock as i, createBlock as g, normalizeStyle as f, createCommentVNode as a, createBaseVNode as o, withDirectives as w, vModelText as A, SEA as B, nextTick as $, updateProfile as E } from "./composables-Ci32s3jE.js";
import { AccountAvatar as P } from "./components.js";
const T = /* @__PURE__ */ o("div", { class: "text-xl font-bold" }, "Create a new account", -1), U = /* @__PURE__ */ o("div", { class: "mb-4 mt-2" }, "Tap the circle to generate a new key", -1), V = { class: "flex flex-col" }, j = { class: "flex justify-center my-4" }, z = /* @__PURE__ */ o("div", { class: "i-la-undo text-2xl" }, null, -1), D = [
  z
], N = /* @__PURE__ */ o("div", { class: "i-fad-random-1dice text-3xl" }, null, -1), S = [
  N
], G = /* @__PURE__ */ _({
  __name: "AuthCreate",
  setup(H) {
    const c = p("deep");
    p("light");
    const { user: d, auth: x } = h(), s = v(""), t = v(null), { history: b, undo: k, redo: M } = C(t);
    async function u() {
      t.value = await B.pair();
    }
    u();
    function y() {
      x(t.value, () => $(() => {
        E("name", s.value);
      }));
    }
    return (R, e) => {
      var m;
      return n(d).is ? a("", !0) : (r(), i("div", {
        key: 0,
        class: "flex flex-col items-center flex-1 p-2 bg-light-700 dark-bg-dark-200 rounded-3xl shadow-lg text-center p-4 transition duration-300ms ease-in",
        style: f({ backgroundColor: n(c).hex(((m = t.value) == null ? void 0 : m.pub) || "") })
      }, [
        T,
        U,
        t.value ? (r(), g(n(P), {
          key: 0,
          class: "cursor-pointer rounded-full shadow-xl border-8",
          pub: t.value.pub,
          size: 200,
          style: f({ borderColor: n(c).hex(t.value.pub) }),
          onClick: e[0] || (e[0] = (l) => u())
        }, null, 8, ["pub", "style"])) : a("", !0),
        o("div", V, [
          o("div", j, [
            n(b).length > 2 ? (r(), i("button", {
              key: 0,
              class: "m-2 button items-center",
              onClick: e[1] || (e[1] = (l) => n(k)())
            }, D)) : a("", !0),
            o("button", {
              class: "m-2 button items-center",
              onClick: e[2] || (e[2] = (l) => u())
            }, S)
          ]),
          w(o("input", {
            class: "p-4 rounded-2xl my-2 dark-bg-dark-200",
            "onUpdate:modelValue": e[3] || (e[3] = (l) => s.value = l),
            placeholder: "Enter your name or nickname"
          }, null, 512), [
            [A, s.value]
          ]),
          t.value && !n(d).is && s.value ? (r(), i("button", {
            key: 0,
            class: "button w-full flex justify-center items-center",
            onClick: e[4] || (e[4] = (l) => y())
          }, "Authenticate")) : a("", !0)
        ])
      ], 4));
    };
  }
});
export {
  G as default
};
//# sourceMappingURL=AuthCreate-oH-ZusfS.js.map
