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