import { reactive as f, computed as b, unref as s, openBlock as r, createElementBlock as a, normalizeStyle as k, createElementVNode as u, createCommentVNode as l, withDirectives as x, vModelText as v, createVNode as y, Transition as g, withCtx as w } from "vue";
import { useUser as C, useBackground as N, SEA as V, createRoom as B } from "./composables-5f691338.js";
const E = { class: "flex" }, A = {
  __name: "RoomForm",
  emits: ["room"],
  setup(R, { emit: _ }) {
    const { user: m } = C(), e = f({
      pair: null,
      name: ""
    });
    async function p() {
      let o = await V.pair();
      e.pair = o;
    }
    function i() {
      e.pair = null, e.name = "";
    }
    function d() {
      B(e), i();
    }
    const c = b(() => {
      var o;
      return N({ pub: (o = e.pair) == null ? void 0 : o.pub, size: 620 });
    });
    return (o, t) => s(m).pub ? (r(), a("div", {
      key: 0,
      class: "flex flex-col bg-cover rounded-2xl p-8 max-w-620px bg-light-800 dark-bg-dark-500 justify-center",
      style: k({ ...s(c) })
    }, [
      u("div", E, [
        u("button", {
          class: "button m-2 flex-1",
          onClick: t[0] || (t[0] = (n) => p())
        }, "Generate a new room"),
        e.pair ? (r(), a("button", {
          key: 0,
          class: "button m-2",
          onClick: t[1] || (t[1] = (n) => i())
        }, "Reset")) : l("", !0)
      ]),
      e.pair ? x((r(), a("input", {
        key: 0,
        class: "p-2 m-2 rounded-xl dark-bg-dark-200",
        "onUpdate:modelValue": t[2] || (t[2] = (n) => e.name = n),
        type: "text",
        placeholder: "New room name"
      }, null, 512)), [
        [v, e.name]
      ]) : l("", !0),
      y(g, { name: "fade" }, {
        default: w(() => [
          e.pair && e.name ? (r(), a("button", {
            key: 0,
            class: "button m-2 flex-1",
            onClick: t[3] || (t[3] = (n) => d())
          }, "Add room")) : l("", !0)
        ]),
        _: 1
      })
    ], 4)) : l("", !0);
  }
};
export {
  A as default
};
//# sourceMappingURL=RoomForm-e8ef7e82.js.map
