import { inject as re, ref as i, computed as u, reactive as ce, onMounted as ie, unref as F, createElementBlock as n, openBlock as o, createElementVNode as s, normalizeClass as j, createCommentVNode as p, Fragment as S, renderList as R, withDirectives as $, vModelRadio as ue, toDisplayString as I, vModelText as de, normalizeStyle as pe, createBlock as L, createVNode as me } from "vue";
import ve from "../../3_compounds/Feed/assets/chat-background.svg.js";
import _e from "../PlaceholderComponent/PlaceholderComponent.vue.js";
import fe from "../WABAAttachmentSection/WABAAttachmentSection.vue.js";
import ye from "../WABAQuickReplyButtons/WABAQuickReplyButtons.vue.js";
import he from "../WABASeparatedQuickButtons/WABASeparatedQuickButtons.vue.js";
/* empty css                          */
import be from "../../../_virtual/_plugin-vue_export-helper.js";
const ge = { class: "template-selector" }, we = ["id"], ke = { style: { display: "flex" } }, Te = { style: { display: "flex" } }, Ce = {
  key: 0,
  class: "template-selector__button-close"
}, xe = {
  key: 1,
  class: "template-selector__button-close"
}, Ve = { class: "template-selector__layout" }, Se = { class: "template-selector__first-col" }, Ie = { class: "template-selector__list-groups" }, Ae = { class: "template-selector__label-group" }, Be = ["src", "alt"], We = ["id", "value"], Ee = { class: "template-selector__second-col" }, Pe = { class: "template-selector__searching-container" }, Fe = { class: "template-selector__templates" }, je = {
  key: 0,
  class: "template-selector__list-templates"
}, Re = ["onClick"], Le = { class: "template-selector__item-template-info" }, Oe = { class: "template-selector__item-title" }, Ue = { class: "template-selector__item-text" }, ze = {
  key: 1,
  class: "template-selector__plug"
}, Me = { class: "template-selector__third-col" }, Qe = {
  key: 0,
  class: "template-selector__preview"
}, $e = { class: "template-selector__preview-wrapper" }, qe = { class: "template-selector__preview-text-container" }, Ne = { key: 0 }, Xe = {
  key: 1,
  class: "template-selector__plug"
}, De = {
  key: 2,
  class: "template-selector__reply-buttons"
}, Ge = ["disabled"], He = {
  __name: "WABATemplateSelector",
  props: {
    wabaTemplates: {
      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", "sendWabaValues"],
  setup(w, { emit: q }) {
    const m = w, y = re("chatAppId"), A = q, N = () => {
      A("closeTemplateWindow"), z();
    }, X = () => {
      A("closeTemplateWindow");
      const e = {
        text: "",
        templateId: "",
        values: [],
        file: null,
        buttons: null
      };
      v.value ? (e.text = M.value, e.templateId = a.value.templateId, e.values = Q.value, e.file = v.value) : (e.text = M.value, e.templateId = a.value.templateId, e.values = Q.value), a.value.buttons && (e.buttons = a.value.buttons), A("sendWabaValues", e), z();
    }, D = (e) => {
      v.value = e;
    }, k = i(null), h = i(null), a = i(null), v = i(null), B = i(""), b = i(!1), W = () => {
      b.value = !b.value, b.value ? (k.value.scrollTop = 0, k.value.style["overflow-y"] = "hidden") : k.value.style["overflow-y"] = "scroll";
    }, G = (e) => {
      Object.keys(r).forEach((l) => {
        r[l] = "";
      }), v.value = null, m.wabaTemplates.forEach((l) => l.isSelected = !1), e.isSelected = !0, a.value = e, b.value = !1, U();
    }, H = () => {
      P(), m.wabaTemplates.forEach((e) => e.isSelected = !1);
    }, J = u(() => m.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ve)}`), K = u(() => h.value ? m.wabaTemplates.filter((e) => e.groupId === h.value.groupId) : m.wabaTemplates), O = u(() => {
      const e = B.value.trim().toLowerCase();
      return K.value.filter((l) => l.title.toLowerCase().includes(e) || l.template.toLowerCase().includes(e));
    }), r = ce({}), Y = i(null), E = i(), T = i(""), d = i(""), C = i(""), _ = i(!1), Z = u(() => !!(_.value && (C.value == "grid" && d.value == "none" || d.value == "grid" && T.value == "none"))), ee = u(() => !!(_.value && (T.value == "grid" && d.value == "none" || d.value == "grid" && C.value == "none"))), te = () => {
      _.value && (d.value == "grid" ? se() : C.value == "grid" && P());
    }, le = () => {
      _.value && (d.value == "grid" ? U() : T.value == "grid" && P());
    }, se = () => {
      const e = document.getElementById("waba-template-selector-container-" + y);
      e.style.setProperty("--chotto-waba-template-first-col-display", "grid"), e.style.setProperty("--chotto-waba-template-second-col-display", "none"), console.log(e, window.getComputedStyle(e).getPropertyValue("--waba-template-first-col-display")), x();
    }, U = () => {
      const e = document.getElementById("waba-template-selector-container-" + y);
      e.style.setProperty("--chotto-waba-template-third-col-display", "grid"), e.style.setProperty("--chotto-waba-template-second-col-display", "none"), x();
    }, P = () => {
      const e = document.getElementById("waba-template-selector-container-" + y);
      e.style.setProperty("--chotto-waba-template-second-col-display", "grid"), e.style.setProperty("--chotto-waba-template-first-col-display", "none"), e.style.setProperty("--chotto-waba-template-third-col-display", "none"), x();
    }, x = () => {
      const e = document.getElementById("waba-template-selector-container-" + y), l = window.getComputedStyle(e);
      T.value = l.getPropertyValue("--chotto-waba-template-first-col-display"), d.value = l.getPropertyValue("--chotto-waba-template-second-col-display"), C.value = l.getPropertyValue("--chotto-waba-template-third-col-display");
    }, ae = (e) => {
      r[e[1]] = e[0];
    }, V = u(() => {
      var f;
      const e = (f = a.value) == null ? void 0 : f.template;
      if (!e) return [];
      const l = [...e.matchAll(/{{\d+}}/g)], t = [];
      let c = 0;
      return l.forEach((g) => {
        g.index > c && t.push(e.substring(c, g.index)), t.push({ index: parseInt(g[0].slice(2, -2)) }), c = g.index + g[0].length;
      }), c < e.length && t.push(e.substring(c)), t;
    }), oe = u(() => {
      var l, t;
      if (!a.value)
        return !0;
      if (!((l = a.value) != null && l.template.match(/{{\d+}}/gi)))
        return !1;
      const e = Object.keys(r).length !== ((t = a.value) == null ? void 0 : t.template.match(/{{\d+}}/gi).length);
      return a.value.type === "TEXT" ? e : a.value.type !== "TEXT" ? e || !v.value : !1;
    }), z = () => {
      Object.keys(r).forEach((e) => {
        r[e] = "";
      }), v.value = null, a.value = null, m.wabaTemplates.forEach((e) => e.isSelected = !1);
    }, M = u(() => {
      console.log(V.value, a.value.buttons);
      let e = V.value.map((t) => typeof t == "string" ? t : r[t.index]).join(""), l = "";
      return a.value.buttons && (l = a.value.buttons.map((t) => `
| [` + t.text + "]").join("")), e.concat(l);
    }), Q = u(() => {
      const e = [];
      for (const l in r)
        r[l] !== "" && r[l] !== "Заполнить" && e.push(r[l]);
      return e;
    }), ne = new ResizeObserver((e) => {
      const l = e[0].target.clientWidth;
      l > 700 && (_.value = !1), l < 700 && (_.value = !0);
    });
    return ie(() => {
      x(), F(E) && ne.observe(F(E));
    }), (e, l) => (o(), n("div", ge, [
      s("div", {
        id: "waba-template-selector-container-" + F(y),
        ref_key: "refContainer",
        ref: E,
        class: j({
          "template-selector__container-inline": !w.elevatedWindow,
          "template-selector__container-elevated": w.elevatedWindow
        })
      }, [
        s("div", ke, [
          s("div", Te, [
            Z.value ? (o(), n("button", Ce, [
              s("span", {
                class: "pi pi-arrow-left",
                onClick: te
              })
            ])) : p("", !0),
            ee.value ? (o(), n("button", xe, [
              s("span", {
                class: "pi pi-arrow-right",
                onClick: le
              })
            ])) : p("", !0)
          ]),
          s("button", { class: "template-selector__button-close" }, [
            s("span", {
              class: "pi pi-times",
              onClick: N
            })
          ])
        ]),
        s("div", Ve, [
          s("div", Se, [
            s("ul", Ie, [
              (o(!0), n(S, null, R(w.groupTemplates, (t, c) => (o(), n("li", {
                key: c,
                class: j(["template-selector__item-group", { "template-selector__item-selected": h.value === t }]),
                onClick: H
              }, [
                s("label", Ae, [
                  t.iconUrl ? (o(), n("img", {
                    key: 0,
                    class: "template-selector__item-group-icon",
                    src: t.iconUrl,
                    alt: t.title
                  }, null, 8, Be)) : p("", !0),
                  $(s("input", {
                    id: c,
                    "onUpdate:modelValue": l[0] || (l[0] = (f) => h.value = f),
                    value: t,
                    class: "template-selector__input-group",
                    type: "radio"
                  }, null, 8, We), [
                    [ue, h.value]
                  ]),
                  s("span", null, I(t.title), 1)
                ])
              ], 2))), 128))
            ])
          ]),
          s("div", Ee, [
            s("div", Pe, [
              $(s("input", {
                "onUpdate:modelValue": l[1] || (l[1] = (t) => B.value = t),
                class: "template-selector__searching-input",
                type: "text",
                placeholder: "Поиск шаблона"
              }, null, 512), [
                [de, B.value]
              ])
            ]),
            s("div", Fe, [
              O.value.length !== 0 ? (o(), n("ul", je, [
                (o(!0), n(S, null, R(O.value, (t, c) => (o(), n("li", {
                  key: c,
                  class: j(["template-selector__item-template", { "template-selector__item-selected": t.isSelected }]),
                  onClick: (f) => G(t)
                }, [
                  s("div", Le, [
                    s("p", Oe, I(t.title), 1),
                    s("p", Ue, I(t.template), 1)
                  ])
                ], 10, Re))), 128))
              ])) : (o(), n("p", ze, " Шаблоны отсутствуют "))
            ])
          ]),
          s("div", Me, [
            s("div", {
              ref_key: "previewContainer",
              ref: k,
              class: "template-selector__preview-container",
              style: pe({ backgroundImage: `url(${J.value})` })
            }, [
              V.value.length > 0 ? (o(), n("div", Qe, [
                s("div", $e, [
                  a.value.type != "TEXT" ? (o(), L(fe, {
                    key: 0,
                    type: a.value.type,
                    "template-id": a.value.templateId,
                    onFileSelected: D
                  }, null, 8, ["type", "template-id"])) : p("", !0),
                  s("div", qe, [
                    (o(!0), n(S, null, R(V.value, (t, c) => (o(), n(S, { key: c }, [
                      typeof t == "string" ? (o(), n("span", Ne, I(t), 1)) : typeof t == "object" ? (o(), L(_e, {
                        key: 1,
                        index: t.index,
                        value: r[t.index] || "Заполнить",
                        "is-filled": !!r[t.index],
                        onClick: (f) => Y.value = t.index,
                        onEdit: ae
                      }, null, 8, ["index", "value", "is-filled", "onClick"])) : p("", !0)
                    ], 64))), 128))
                  ]),
                  l[2] || (l[2] = s("p", { class: "template-selector__preview-time" }, " 22:22 ", -1)),
                  a.value.buttons ? (o(), L(ye, {
                    key: 1,
                    buttons: a.value.buttons,
                    onSelectAllVariants: W
                  }, null, 8, ["buttons"])) : p("", !0)
                ])
              ])) : (o(), n("p", Xe, " Предпросмотр шаблона ")),
              b.value ? (o(), n("div", De, [
                s("div", {
                  class: "template-selector__semitransparent-overlay",
                  onClick: W
                }),
                me(he, {
                  buttons: a.value.buttons,
                  onSelectAllVariants: W
                }, null, 8, ["buttons"])
              ])) : p("", !0)
            ], 4),
            s("button", {
              class: "template-selector__button-paste",
              disabled: oe.value,
              onClick: X
            }, " Отправить ", 8, Ge)
          ])
        ])
      ], 10, we)
    ]));
  }
}, at = /* @__PURE__ */ be(He, [["__scopeId", "data-v-3a4405f2"]]);
export {
  at as default
};
