import { defineComponent as c, computed as d, createElementBlock as n, openBlock as o, createVNode as f, createCommentVNode as k, TransitionGroup as b, withCtx as v, Fragment as y, renderList as C, unref as s, createBlock as _, normalizeStyle as x, withModifiers as w, createElementVNode as l } from "vue";
import { useUser as B, useGuests as G, joinRoom as N } from "./composables-BAZQlC3e.js";
import { AccountBadge as V } from "./components.js";
const $ = { class: "flex flex-wrap" }, S = /* @__PURE__ */ c({
  __name: "GuestList",
  props: {
    state: { type: String, default: "online" }
  },
  emits: ["user"],
  setup(u, { emit: g }) {
    const { user: r } = B(), i = G(), m = d(() => i.guests[r.pub]);
    return (a, t) => (o(), n("div", $, [
      f(b, { name: "fade" }, {
        default: v(() => [
          (o(!0), n(y, null, C(s(i)[u.state], (e, p) => (o(), _(s(V), {
            class: "shadow-md m-1",
            key: p,
            size: 30,
            pub: e.pub,
            style: x({ opacity: e.online ? 1 : 0.5, order: e.order }),
            onClick: (z) => a.$emit("user", e.pub)
          }, null, 8, ["pub", "style", "onClick"]))), 128))
        ]),
        _: 1
      }),
      s(r).is && !m.value ? (o(), n("button", {
        key: 0,
        class: "button flex items-center m-4 p-2",
        onClick: t[0] || (t[0] = w((e) => s(N)(), ["stop", "prevent"]))
      }, t[1] || (t[1] = [
        l("div", { class: "i-la-plus" }, null, -1),
        l("div", { class: "ml-2" }, "Join", -1)
      ]))) : k("", !0)
    ]));
  }
});
export {
  S as default
};
//# sourceMappingURL=GuestList-qrc-e7hK.js.map
