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