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