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