import { computed as y, reactive as _, createElementBlock as u, openBlock as n, createElementVNode as l, renderSlot as B, normalizeStyle as L, createBlock as f, unref as e, createVNode as d, toDisplayString as U, Fragment as h, renderList as w, createCommentVNode as F } from "vue";
import { features as S, useUser as T, currentRoom as c, useRoom as z, useMd as H, useColor as M, useBackground as N } from "./composables-BAZQlC3e.js";
import { RoomLogo as P, FormTitle as V, AccountBadge as A, RoomActions as E, RoomFeature as j, GuestList as R, FormText as D } from "./components.js";
const G = { class: "flex flex-col items-stretch" }, O = { class: "max-w-full flex flex-col items-stretche bg-light-100 bg-opacity-20 dark-bg-dark-800 dark-bg-opacity-40 p-4 md-p-12 shadow-xl backdrop-blur-md backdrop-filter rounded-t-xl" }, q = { class: "flex flex-wrap items-center gap-8" }, I = {
  class: "flex flex-col flex-auto",
  style: { flex: "100" }
}, J = { class: "text-md" }, K = { class: "flex items-center flex-wrap" }, Q = { class: "flex flex-col items-center bg-light-300 dark-bg-dark-400" }, W = { class: "flex flex-wrap items-center gap-2 p-4" }, X = { class: "px-4" }, Y = { class: "relative" }, Z = {
  key: 0,
  class: "flex items-center"
}, ee = ["innerHTML"], ie = {
  __name: "RoomPage",
  props: {
    pub: { type: String, default: "" },
    titles: {
      type: Object,
      default: () => S
    }
  },
  emits: ["rooms", "browse", "user"],
  setup(m) {
    const x = m, { user: b } = T(), i = y(() => x.pub ? x.pub : c.pub), { room: r, leaveRoom: te, updateRoomProfile: v, enterRoom: se } = z(i.value), $ = H(), a = _({
      name: !1,
      description: !1,
      text: !1
    });
    M("deep");
    const C = y(() => N({ pub: i.value, size: 1200, attachment: "local" }));
    return (p, t) => {
      var g, k;
      return n(), u("div", G, [
        l("div", {
          class: "pt-32 px-2 md-px-8 bg-cover relative flex flex-col items-center",
          style: L({ ...C.value })
        }, [
          l("div", O, [
            l("div", q, [
              (n(), f(e(P), {
                class: "flex-1 rounded-2xl overflow-hidden min-w-20",
                pub: i.value,
                key: i.value
              }, null, 8, ["pub"])),
              l("div", I, [
                d(e(V), {
                  class: "font-bold text-2xl",
                  text: e(r).profile.name || i.value.substring(0, 12),
                  editable: e(r).hosts[e(b).pub] && i.value == e(c).pub && !a.name,
                  onUpdate: t[0] || (t[0] = (o) => e(v)("name", o))
                }, null, 8, ["text", "editable"]),
                l("div", J, U(e(r).profile.description), 1),
                l("div", K, [
                  t[6] || (t[6] = l("div", { class: "font-bold mr-2" }, "Hosts: ", -1)),
                  (n(!0), u(h, null, w(e(r).hosts, (o, s) => (n(), u("div", {
                    class: "p-2 flex flex-col items-start gap-2",
                    key: s
                  }, [
                    d(e(A), {
                      pub: s,
                      selectable: !0
                    }, null, 8, ["pub"])
                  ]))), 128))
                ]),
                d(e(E), { pub: i.value }, null, 8, ["pub"])
              ])
            ])
          ])
        ], 4),
        B(p.$slots, "default"),
        l("div", Q, [
          l("div", W, [
            (n(!0), u(h, null, w(m.titles, (o, s) => (n(), f(e(j), {
              key: s,
              cert: e(r).features[s],
              type: s,
              title: o,
              pub: m.pub || e(c).pub,
              open: e(r).features[s] || s == "users" && e(r).features.space || s == "chat" && e(r).features.chat,
              onClick: (le) => p.$emit("browse", s)
            }, null, 8, ["cert", "type", "title", "pub", "open", "onClick"]))), 128))
          ]),
          l("div", X, [
            d(e(R), {
              onUser: t[1] || (t[1] = (o) => p.$emit("user", o))
            }),
            d(e(R), {
              state: "offline",
              onUser: t[2] || (t[2] = (o) => p.$emit("user", o))
            })
          ]),
          l("div", Y, [
            a.text === !1 ? (n(), u("div", Z, [
              l("div", {
                class: "p-8 prose max-w-65ch break-all",
                innerHTML: e($).render(((g = e(r).profile) == null ? void 0 : g.text) || "")
              }, null, 8, ee),
              (k = e(r).hosts) != null && k[e(b).pub] ? (n(), u("button", {
                key: 0,
                class: "button absolute top-4 right-4 z-200",
                onClick: t[3] || (t[3] = (o) => {
                  var s;
                  return a.text = ((s = e(r).profile) == null ? void 0 : s.text) || "";
                })
              }, t[7] || (t[7] = [
                l("div", { class: "i-la-pen" }, null, -1)
              ]))) : F("", !0)
            ])) : (n(), f(e(D), {
              key: 1,
              text: a.text,
              "onUpdate:text": t[4] || (t[4] = (o) => a.text = o),
              onClose: t[5] || (t[5] = (o) => {
                e(v)("text", a.text), a.text = !1;
              })
            }, null, 8, ["text"]))
          ])
        ])
      ]);
    };
  }
};
export {
  ie as default
};
//# sourceMappingURL=RoomPage-CXZCPKZX.js.map
