import { defineComponent as h, ref as p, resolveComponent as C, unref as n, openBlock as r, createElementBlock as i, normalizeStyle as v, createBlock as g, createCommentVNode as a, createElementVNode as o, withDirectives as w, vModelText as E, nextTick as $ } from "vue";
import { useColor as f, useUser as A, useRefHistory as B, SEA as P, updateProfile as T } from "./composables-5f691338.js";
const U = /* @__PURE__ */ o("div", { class: "text-xl font-bold" }, "Create a new account", -1), V = /* @__PURE__ */ o("div", { class: "mb-4 mt-2" }, "Tap the circle to generate a new key", -1), j = { class: "flex flex-col" }, z = { class: "flex justify-center my-4" }, D = /* @__PURE__ */ o("div", { class: "i-la-undo text-2xl" }, null, -1), N = [
  D
], S = /* @__PURE__ */ o("div", { class: "i-fad-random-1dice text-3xl" }, null, -1), H = [
  S
], I = /* @__PURE__ */ h({
  __name: "AuthCreate",
  setup(M) {
    const c = f("deep");
    f("light");
    const { user: d, auth: x } = A(), s = p(""), t = p(null), { history: b, undo: k, redo: R } = B(t);
    async function u() {
      t.value = await P.pair();
    }
    u();
    function y() {
      x(t.value, () => $(() => {
        T("name", s.value);
      }));
    }
    return (q, e) => {
      var m;
      const _ = C("account-avatar");
      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: v({ backgroundColor: n(c).hex(((m = t.value) == null ? void 0 : m.pub) || "") })
      }, [
        U,
        V,
        t.value ? (r(), g(_, {
          key: 0,
          class: "cursor-pointer rounded-full shadow-xl border-8",
          pub: t.value.pub,
          size: 200,
          style: v({ borderColor: n(c).hex(t.value.pub) }),
          onClick: e[0] || (e[0] = (l) => u())
        }, null, 8, ["pub", "style"])) : a("", !0),
        o("div", j, [
          o("div", z, [
            n(b).length > 2 ? (r(), i("button", {
              key: 0,
              class: "m-2 button items-center",
              onClick: e[1] || (e[1] = (l) => n(k)())
            }, N)) : a("", !0),
            o("button", {
              class: "m-2 button items-center",
              onClick: e[2] || (e[2] = (l) => u())
            }, H)
          ]),
          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), [
            [E, 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 {
  I as default
};
//# sourceMappingURL=AuthCreate-ef950d52.js.map
