import { defineComponent as k, useMediaQuery as y, useUser as h, useGuests as w, ref as p, onClickOutside as C, computed as z, openBlock as n, createElementBlock as i, unref as t, withModifiers as m, createCommentVNode as a, joinRoom as L, createVNode as f, withCtx as N, Fragment as _, renderList as U, createBaseVNode as e, toDisplayString as v, Transition as V, createTextVNode as B } from "./composables-Ci32s3jE.js";
import { GuestList as M } from "./components.js";
const $ = /* @__PURE__ */ e("div", { class: "i-la-users text-3xl" }, null, -1), G = /* @__PURE__ */ e("div", { class: "ml-1 flex items-center gap-2" }, [
  /* @__PURE__ */ B("Users list"),
  /* @__PURE__ */ e("div", { class: "i-la-angle-up" })
], -1), O = /* @__PURE__ */ e("div", { class: "flex-1" }, null, -1), R = [
  $,
  G,
  O
], T = /* @__PURE__ */ e("div", { class: "i-la-plus" }, null, -1), j = /* @__PURE__ */ e("div", { class: "ml-2" }, "Join", -1), D = [
  T,
  j
], E = { class: "flex items-center" }, F = { class: "text-xl mr-2 capitalize" }, I = { class: "px-2 py-1 rounded-xl font-bold" }, A = /* @__PURE__ */ k({
  __name: "UserListOverlay",
  emits: ["user"],
  setup(J, { emit: Q }) {
    const r = y("(min-width: 640px)"), { user: u } = h(), d = w(), l = p(), c = p();
    C(c, () => {
      l.value && (l.value = !1);
    });
    const x = z(() => d.guests[u.pub]);
    return (g, s) => (n(), i(_, null, [
      !l.value && !t(r) ? (n(), i("button", {
        key: 0,
        class: "absolute flex items-center m-4 p-2 left-0 bottom-0 z-200",
        onMousedown: s[0] || (s[0] = m((o) => l.value = !0, ["stop", "prevent"]))
      }, R, 32)) : a("", !0),
      t(u).is && !x.value ? (n(), i("button", {
        key: 1,
        class: "button absolute flex items-center m-4 p-2 right-0 top-0 z-200",
        onClick: s[1] || (s[1] = m((o) => t(L)(), ["stop", "prevent"]))
      }, D)) : a("", !0),
      f(V, { name: "fade" }, {
        default: N(() => [
          t(r) || l.value && !t(r) ? (n(), i("div", {
            key: 0,
            class: "absolute left-0 bottom-0 w-60 bg-light-200 dark-bg-dark-800 dark-bg-opacity-80 bg-opacity-70 z-100 overflow-y-scroll px-2 max-h-full flex flex-col gap-2 p-2 rounded-tr-xl",
            ref_key: "panel",
            ref: c
          }, [
            (n(), i(_, null, U(["online", "offline"], (o) => e("div", {
              class: "flex flex-col gap-2",
              key: o
            }, [
              e("div", E, [
                e("div", F, v(o), 1),
                e("div", I, v(t(d).count[o]), 1)
              ]),
              f(t(M), {
                state: o,
                onUser: s[2] || (s[2] = (b) => g.$emit("user", b))
              }, null, 8, ["state"])
            ])), 64))
          ], 512)) : a("", !0)
        ]),
        _: 1
      })
    ], 64));
  }
});
export {
  A as default
};
//# sourceMappingURL=UserListOverlay-BPS_XpqC.js.map
