import { inject as j, ref as c, computed as m, onMounted as G, unref as p, createElementBlock as o, openBlock as a, createElementVNode as e, normalizeClass as b, createCommentVNode as S, Fragment as V, renderList as x, withDirectives as E, vModelRadio as H, toDisplayString as w, vModelText as J, normalizeStyle as K } from "vue";
import { useMessageDraft as X } from "../../../hooks/useMessageDraft.js";
import "../../../hooks/useSearchModel.js";
import "../../../hooks/useTheme.js";
/* empty css                              */
import Y from "../../../_virtual/_plugin-vue_export-helper.js";
/* empty css                                              */
import "../../../node_modules/linkifyjs/dist/linkify.js";
import "../../../node_modules/linkify-string/dist/linkify-string.js";
import "../../../functions/parseMarkdown.js";
import Z from "../../3_compounds/Feed/assets/chat-background.svg.js";
/* empty css                      */
const ee = { class: "template-selector" }, te = ["id"], le = { style: { display: "flex" } }, se = { style: { display: "flex" } }, oe = {
  key: 0,
  class: "template-selector__button-close"
}, ae = {
  key: 1,
  class: "template-selector__button-close"
}, re = { class: "template-selector__button-close" }, ce = { class: "template-selector__layout" }, ne = ["id"], ie = { class: "template-selector__list-groups" }, pe = { class: "template-selector__label-group" }, de = ["src", "alt"], ue = ["id", "value"], me = ["id"], _e = { class: "template-selector__searching-container" }, ve = { class: "template-selector__templates" }, fe = {
  key: 0,
  class: "template-selector__list-templates"
}, he = ["onClick"], ye = { class: "template-selector__item-template-info" }, ge = { class: "template-selector__item-title" }, we = { class: "template-selector__item-text" }, ke = {
  key: 1,
  class: "template-selector__plug"
}, Ce = ["id"], Te = {
  key: 0,
  class: "template-selector__preview"
}, be = { class: "template-selector__preview-wrapper" }, Se = { class: "template-selector__preview-text" }, Be = {
  key: 1,
  class: "template-selector__plug"
}, Ie = {
  __name: "TemplateSelector",
  props: {
    templates: {
      type: Array,
      required: !1,
      default: () => []
    },
    groupTemplates: {
      type: Array,
      required: !1,
      default: () => []
    },
    elevatedWindow: {
      type: Boolean,
      required: !1,
      default: !1
    },
    chatBackground: {
      type: String,
      default: void 0
    }
  },
  emits: ["closeTemplateWindow", "pasteTemplate"],
  setup(_, { emit: W }) {
    const d = _, r = j("chatAppId"), { setMessageText: L } = X(r), M = () => {
      R("closeTemplateWindow"), L(v.value.template);
    }, R = W, u = c(null), v = c(null), k = c(""), C = c(), f = c(""), n = c(""), h = c(""), i = c(!1), U = m(() => d.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(Z)}`), $ = m(() => !!(i.value && (h.value == "grid" && n.value == "none" || n.value == "grid" && f.value == "none"))), z = m(() => !!(i.value && (f.value == "grid" && n.value == "none" || n.value == "grid" && h.value == "none"))), A = () => {
      i.value && (n.value == "grid" ? D() : h.value == "grid" && T());
    }, q = () => {
      i.value && (n.value == "grid" ? B() : f.value == "grid" && T());
    }, D = () => {
      const t = document.getElementById("template-selector-container-" + r);
      t.style.setProperty("--chotto-template-first-col-display", "grid"), t.style.setProperty("--chotto-template-second-col-display", "none"), y();
    }, B = () => {
      const t = document.getElementById("template-selector-container-" + r);
      t.style.setProperty("--chotto-template-third-col-display", "grid"), t.style.setProperty("--chotto-template-second-col-display", "none"), y();
    }, T = () => {
      const t = document.getElementById("template-selector-container-" + r);
      t.style.setProperty("--chotto-template-second-col-display", "grid"), t.style.setProperty("--chotto-template-first-col-display", "none"), t.style.setProperty("--chotto-template-third-col-display", "none"), y();
    }, y = () => {
      const t = document.getElementById("template-selector-container-" + r), l = window.getComputedStyle(t);
      f.value = l.getPropertyValue("--chotto-template-first-col-display"), n.value = l.getPropertyValue("--chotto-template-second-col-display"), h.value = l.getPropertyValue("--chotto-template-third-col-display");
    }, F = (t) => {
      d.templates.forEach((l) => l.isSelected = !1), t.isSelected = !0, v.value = t, B();
    }, O = () => {
      T(), d.templates.forEach((t) => t.isSelected = !1);
    }, N = m(() => u.value ? d.templates.filter((t) => t.groupId === u.value.groupId) : d.templates), I = m(() => {
      const t = k.value.trim().toLowerCase();
      return N.value.filter((l) => l.title.toLowerCase().includes(t) || l.template.toLowerCase().includes(t));
    }), Q = new ResizeObserver((t) => {
      const l = t[0].target.clientWidth;
      l > 700 && (i.value = !1), l < 700 && (i.value = !0);
    });
    return G(() => {
      y(), p(C) && Q.observe(p(C));
    }), (t, l) => (a(), o("div", ee, [
      e("div", {
        id: "template-selector-container-" + p(r),
        ref_key: "refContainer",
        ref: C,
        class: b({
          "template-selector__container-inline": !_.elevatedWindow,
          "template-selector__container-elevated": _.elevatedWindow
        })
      }, [
        e("div", le, [
          e("div", se, [
            $.value ? (a(), o("button", oe, [
              e("span", {
                class: "pi pi-arrow-left",
                onClick: A
              })
            ])) : S("", !0),
            z.value ? (a(), o("button", ae, [
              e("span", {
                class: "pi pi-arrow-right",
                onClick: q
              })
            ])) : S("", !0)
          ]),
          e("button", re, [
            e("span", {
              class: "pi pi-times",
              onClick: l[0] || (l[0] = (s) => t.$emit("closeTemplateWindow"))
            })
          ])
        ]),
        e("div", ce, [
          e("div", {
            id: "template-selector-first-col-" + p(r),
            class: "template-selector__first-col"
          }, [
            e("ul", ie, [
              (a(!0), o(V, null, x(_.groupTemplates, (s, g) => (a(), o("li", {
                key: g,
                class: b(["template-selector__item-group", { "template-selector__item-selected": u.value === s }]),
                onClick: O
              }, [
                e("label", pe, [
                  s.iconUrl ? (a(), o("img", {
                    key: 0,
                    class: "template-selector__item-group-icon",
                    src: s.iconUrl,
                    alt: s.title
                  }, null, 8, de)) : S("", !0),
                  E(e("input", {
                    id: g,
                    "onUpdate:modelValue": l[1] || (l[1] = (P) => u.value = P),
                    value: s,
                    class: "template-selector__input-group",
                    type: "radio"
                  }, null, 8, ue), [
                    [H, u.value]
                  ]),
                  e("span", null, w(s.title), 1)
                ])
              ], 2))), 128))
            ])
          ], 8, ne),
          e("div", {
            id: "template-selector-second-col-" + p(r),
            class: "template-selector__second-col"
          }, [
            e("div", _e, [
              E(e("input", {
                "onUpdate:modelValue": l[2] || (l[2] = (s) => k.value = s),
                class: "template-selector__searching-input",
                type: "text",
                placeholder: "Поиск шаблона"
              }, null, 512), [
                [J, k.value]
              ])
            ]),
            e("div", ve, [
              I.value.length !== 0 ? (a(), o("ul", fe, [
                (a(!0), o(V, null, x(I.value, (s, g) => (a(), o("li", {
                  key: g,
                  class: b(["template-selector__item-template", { "template-selector__item-selected": s.isSelected }]),
                  onClick: (P) => F(s)
                }, [
                  e("div", ye, [
                    e("p", ge, w(s.title), 1),
                    e("p", we, w(s.template), 1)
                  ])
                ], 10, he))), 128))
              ])) : (a(), o("p", ke, " Шаблоны отсутствуют "))
            ])
          ], 8, me),
          e("div", {
            id: "template-selector-third-col-" + p(r),
            class: "template-selector__third-col"
          }, [
            e("div", {
              class: "template-selector__preview-container",
              style: K({ backgroundImage: `url(${U.value})` })
            }, [
              v.value ? (a(), o("div", Te, [
                e("div", be, [
                  e("p", Se, w(v.value.template), 1),
                  l[3] || (l[3] = e("p", { class: "template-selector__preview-time" }, " 22:22 ", -1))
                ])
              ])) : (a(), o("p", Be, " Предпросмотр шаблона "))
            ], 4),
            e("button", {
              class: "template-selector__button-paste",
              onClick: M
            }, " Вставить ")
          ], 8, Ce)
        ])
      ], 10, te)
    ]));
  }
}, qe = /* @__PURE__ */ Y(Ie, [["__scopeId", "data-v-23622175"]]);
export {
  qe as default
};
