import { defineComponent as w, useMediaQuery as C, useUser as z, useGuests as B, ref as f, onClickOutside as N, computed as V, openBlock as s, createElementBlock as l, unref as t, withModifiers as _, createCommentVNode as u, joinRoom as $, createVNode as x, withCtx as v, Fragment as d, renderList as b, createBaseVNode as e, toDisplayString as k, TransitionGroup as L, createBlock as M, normalizeStyle as T, Transition as U, createTextVNode as G } from "./composables-108ad332.js";
import { AccountBadge as R } from "./components.js";
const S = /* @__PURE__ */ e("div", { class: "i-la-users text-3xl" }, null, -1), j = /* @__PURE__ */ e("div", { class: "ml-1 flex items-center gap-2" }, [
  /* @__PURE__ */ G("Users list"),
  /* @__PURE__ */ e("div", { class: "i-la-angle-up" })
], -1), A = /* @__PURE__ */ e("div", { class: "flex-1" }, null, -1), D = [
  S,
  j,
  A
], E = /* @__PURE__ */ e("div", { class: "i-la-plus" }, null, -1), F = /* @__PURE__ */ e("div", { class: "ml-2" }, "Join", -1), I = [
  E,
  F
], J = { class: "flex items-center" }, O = { class: "text-xl mr-2 capitalize" }, Q = { class: "px-2 py-1 rounded-xl font-bold" }, q = { class: "flex flex-wrap" }, Y = /* @__PURE__ */ w({
  __name: "UserList",
  emits: ["user"],
  setup(H, { emit: K }) {
    const a = C("(min-width: 640px)"), { user: p } = z(), c = B(), n = f(), m = f();
    N(m, () => {
      n.value && (n.value = !1);
    });
    const y = V(() => c.guests[p.pub]);
    return (h, i) => (s(), l(d, null, [
      !n.value && !t(a) ? (s(), l("button", {
        key: 0,
        class: "absolute flex items-center m-4 p-2 left-0 bottom-0 z-200",
        onMousedown: i[0] || (i[0] = _((o) => n.value = !0, ["stop", "prevent"]))
      }, D, 32)) : u("", !0),
      t(p).is && !t(y) ? (s(), l("button", {
        key: 1,
        class: "button absolute flex items-center m-4 p-2 right-0 top-0 z-200",
        onClick: i[1] || (i[1] = _((o) => t($)(), ["stop", "prevent"]))
      }, I)) : u("", !0),
      x(U, { name: "fade" }, {
        default: v(() => [
          t(a) || n.value && !t(a) ? (s(), l("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: m
          }, [
            (s(), l(d, null, b(["online", "offline"], (o) => e("div", {
              class: "flex flex-col gap-2",
              key: o
            }, [
              e("div", J, [
                e("div", O, k(o), 1),
                e("div", Q, k(t(c).count[o]), 1)
              ]),
              e("div", q, [
                x(L, { name: "fade" }, {
                  default: v(() => [
                    (s(!0), l(d, null, b(t(c)[o], (r, g) => (s(), M(t(R), {
                      class: "shadow-md m-1",
                      key: g,
                      size: 30,
                      pub: r.pub,
                      style: T({ opacity: r.online ? 1 : 0.5, order: r.order }),
                      onClick: (P) => h.$emit("user", r.pub)
                    }, null, 8, ["pub", "style", "onClick"]))), 128))
                  ]),
                  _: 2
                }, 1024)
              ])
            ])), 64))
          ], 512)) : u("", !0)
        ]),
        _: 1
      })
    ], 64));
  }
});
export {
  Y as default
};
//# sourceMappingURL=UserList-f7dcdc33.js.map
