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