import { defineComponent as N, ref as d, createElementBlock as l, openBlock as t, Fragment as f, createCommentVNode as p, createVNode as y, unref as a, toDisplayString as v, Transition as h, withCtx as b, createElementVNode as s, withDirectives as T, withKeys as V, vModelText as z, renderList as g, createBlock as A } from "vue";
import { useChat as B, useMediaQuery as S, onClickOutside as D } from "./composables-BAZQlC3e.js";
import { AccountAvatar as E } from "./components.js";
const K = { class: "flex flex-wrap" }, L = { class: "text-xl font-bold p-2" }, M = {
  key: 0,
  class: "i-la-plus"
}, O = {
  key: 1,
  class: "i-la-times"
}, P = {
  key: 0,
  class: "flex flex-wrap"
}, F = { class: "flex flex-col p-2 gap-2 h-full" }, Q = ["onClick"], U = { class: "flex-1" }, H = /* @__PURE__ */ N({
  __name: "ChatTopics",
  props: {
    title: { type: String, default: "Topics" },
    topic: { type: String, default: "general" }
  },
  emits: ["topic"],
  setup(x) {
    const { addChat: w, chats: C } = B(), r = d(""), n = d(!1), m = d(), i = d(!0), u = S("(min-width: 640px)");
    return D(m, () => u.value ? null : i.value = !1), (_, e) => (t(), l(f, null, [
      !i.value && !a(u) ? (t(), l("button", {
        key: 0,
        class: "button absolute z-200 top-4 left-4",
        onClick: e[0] || (e[0] = (o) => i.value = !0)
      }, v(x.title), 1)) : p("", !0),
      y(h, { name: "fade" }, {
        default: b(() => [
          a(u) || i.value && !a(u) ? (t(), l("div", {
            key: 0,
            class: "px-1 py-2 flex flex-col bg-dark-50 dark-bg-dark-400 bg-opacity-95 gap-2 min-h-full overflow-y-scroll scroll-smooth absolute sm-static z-20 w-220px max-w-full max-h-full text-light-900 backdrop-filter backdrop-blur-xl",
            ref_key: "chatsPanel",
            ref: m,
            style: { flex: "0 1 320px" }
          }, [
            s("div", K, [
              s("div", L, v(x.title), 1),
              e[4] || (e[4] = s("div", { class: "flex-1" }, null, -1)),
              s("div", {
                class: "cursor-pointer self-center text-2xl p-2",
                onClick: e[1] || (e[1] = (o) => n.value = !n.value)
              }, [
                y(h, {
                  name: "fade",
                  mode: "out-in"
                }, {
                  default: b(() => [
                    n.value ? (t(), l("div", O)) : (t(), l("div", M))
                  ]),
                  _: 1
                })
              ])
            ]),
            n.value ? (t(), l("div", P, [
              T(s("input", {
                class: "p-2 m-2 w-full rounded-xl text-dark-800",
                "onUpdate:modelValue": e[2] || (e[2] = (o) => r.value = o),
                placeholder: "New chat",
                onKeyup: e[3] || (e[3] = V((o) => {
                  a(w)(r.value), r.value = "", n.value = !1;
                }, ["enter"]))
              }, null, 544), [
                [z, r.value]
              ])
            ])) : p("", !0),
            s("div", F, [
              (t(!0), l(f, null, g(a(C), (o, c) => (t(), l("div", {
                class: "font-bold bg-light-100 bg-opacity-10 rounded-xl px-2 cursor-pointer flex",
                key: c,
                onClick: ($) => {
                  _.$emit("topic", c), i.value = !1;
                }
              }, [
                s("div", U, v(c), 1),
                (t(!0), l(f, null, g(o, ($, k) => (t(), A(a(E), {
                  key: k,
                  size: 20,
                  pub: k
                }, null, 8, ["pub"]))), 128))
              ], 8, Q))), 128))
            ])
          ], 512)) : p("", !0)
        ]),
        _: 1
      })
    ], 64));
  }
});
export {
  H as default
};
//# sourceMappingURL=ChatTopics-DJJJAMka.js.map
