import { defineComponent as h, watch as g, computed as _, createElementBlock as k, openBlock as d, normalizeStyle as v, createVNode as u, createElementVNode as s, unref as t, withCtx as C, createBlock as S, createCommentVNode as w, toDisplayString as B } from "vue";
import { UiLayer as N, AccountHome as V, ChatMessages as $, ChatInput as z } from "./components.js";
import { useChat as A, watchDebounced as D, useBackground as E, currentRoom as R, selectedUser as c, useWebNotification as U } from "./composables-BAZQlC3e.js";
const H = { class: "px-4 py-6 flex flex-wrap items-center text-center" }, I = { class: "flex-1 ml-2 font-bold" }, L = { class: "p-4 bg-dark-50 bg-opacity-80 flex gap-2 flex sticky bottom-0" }, q = /* @__PURE__ */ h({
  __name: "ChatRoom",
  props: {
    title: { type: String, default: "Topics" },
    topic: { type: String, default: "general" },
    clickSound: { type: String, default: "audio/safe.mp3" }
  },
  emits: ["account"],
  setup(f, { emit: M }) {
    const a = f;
    let i;
    function m() {
      i || (i = new Audio(a.clickSound), i.volume = 0.1), i.play();
    }
    const { send: b, currentChat: r, sorted: p } = A();
    g(() => a.topic, (n) => {
      r.value = n;
    }, { immediate: !0 }), D(p, (n, l) => {
      if (n.length > l.length) {
        m();
        const e = n.slice(-1)[0], {
          isSupported: o,
          show: x
        } = U({
          title: e == null ? void 0 : e.text,
          body: `${e == null ? void 0 : e.timestamp} by ${e == null ? void 0 : e.author}`,
          lang: "en",
          tag: "chat"
        });
        o.value && x();
      }
    }, { deep: !0 });
    const y = _(() => E({ pub: R.pub, size: 1200 }));
    return (n, l) => {
      var e;
      return d(), k("div", {
        class: "flex flex-col overflow-y-scroll",
        style: v([{ flex: "1000 1 auto" }, { ...y.value }])
      }, [
        u(t(N), {
          open: !!((e = t(c)) != null && e.pub),
          onClose: l[0] || (l[0] = (o) => t(c).pub = "")
        }, {
          default: C(() => {
            var o;
            return [
              (o = t(c)) != null && o.pub ? (d(), S(t(V), {
                key: 0,
                pub: t(c).pub
              }, null, 8, ["pub"])) : w("", !0)
            ];
          }),
          _: 1
        }, 8, ["open"]),
        s("div", H, [
          s("div", I, B(t(r)), 1)
        ]),
        u(t($), { messages: t(p) }, null, 8, ["messages"]),
        s("div", L, [
          u(t(z), {
            class: "flex-auto",
            onSubmit: l[1] || (l[1] = (o) => t(b)(o))
          })
        ])
      ], 4);
    };
  }
});
export {
  q as default
};
//# sourceMappingURL=ChatRoom-RRVNKsaX.js.map
