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