import { defineComponent as T, inject as E, ref as s, computed as I, watchEffect as V, onMounted as q, onUnmounted as x, createElementBlock as y, openBlock as g, Fragment as A, createVNode as d, withCtx as h, createCommentVNode as N, unref as b, normalizeClass as W, createElementVNode as F, Transition as $, withDirectives as D, vShow as H } from "vue";
import O from "../TemplateSelector/TemplateSelector.vue.js";
import P from "../../1_atoms/Tooltip/Tooltip.vue.js";
import { useMessageDraft as j } from "../../../hooks/useMessageDraft.js";
import "../../../hooks/useSearchModel.js";
import "../../../hooks/useTheme.js";
/* empty css                              */
/* 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 "./icons/ChatTemplatesIcon.vue.js";
const R = { class: "" }, oe = /* @__PURE__ */ T({
  __name: "ButtonTemplateSelector",
  props: {
    templates: {
      type: Array,
      required: !1,
      default: () => []
    },
    groupTemplates: {
      type: Array,
      required: !1,
      default: () => []
    },
    mode: {
      type: String,
      required: !1,
      default: "click"
    },
    state: {
      type: String,
      default: "active"
    },
    elevatedWindow: {
      type: Boolean,
      required: !1
    },
    chatBackground: {
      type: String,
      default: void 0
    }
  },
  setup(l) {
    const o = l, r = E("chatAppId"), { getMessage: w } = j(r || ""), k = s(null), e = s(null), i = s("#5F5F5F"), c = s("#404040"), m = s(!1);
    let u = null;
    const p = () => {
      if (!r) {
        i.value = "#5F5F5F", c.value = "#404040";
        return;
      }
      const a = document.getElementById(r);
      if (!a) {
        i.value = "#5F5F5F", c.value = "#404040";
        return;
      }
      const t = window.getComputedStyle(a), n = t.getPropertyValue("--chotto-buttontemplateselector-button-span-color").trim(), S = t.getPropertyValue("--chotto-buttontemplateselector-button-span-hover-color").trim();
      i.value = n || "#5F5F5F", c.value = S || "#404040";
    }, C = I(() => m.value ? c.value : i.value);
    V(() => {
      p();
    });
    const B = () => {
      o.mode == "click" && o.state == "active" && e.value && (e.value.style.display == "none" ? e.value.style.display = "inherit" : e.value.style.display == "inherit" && (e.value.style.display = "none"));
    }, v = () => {
      o.mode == "hover" && o.state == "active" && e.value && (e.value.style.display = "inherit");
    }, f = () => {
      o.mode == "hover" && o.state == "active" && e.value && (e.value.style.display = "none");
    }, M = () => {
      e.value && (e.value.style.display = "none");
    };
    return q(() => {
      if (e.value && (e.value.style.display = "none"), p(), r) {
        const a = document.getElementById(r);
        a && (u = new MutationObserver((t) => {
          t.forEach((n) => {
            n.type === "attributes" && n.attributeName === "data-theme" && p();
          });
        }), u.observe(a, {
          attributes: !0,
          attributeFilter: ["data-theme"]
        }));
      }
    }), x(() => {
      u && (u.disconnect(), u = null);
    }), (a, t) => (g(), y(A, null, [
      d(P, {
        text: "Шаблоны сообщений",
        position: "left"
      }, {
        default: h(() => [
          b(w)().isRecording ? N("", !0) : (g(), y("button", {
            key: 0,
            ref_key: "templateButton",
            ref: k,
            class: W(["button-template", { "button-template-disabled": l.state == "disabled" }]),
            onClick: B,
            onMouseover: v,
            onMouseout: f,
            onMouseenter: t[0] || (t[0] = (n) => m.value = !0),
            onMouseleave: t[1] || (t[1] = (n) => m.value = !1)
          }, [
            F("span", R, [
              d(b(z), { fill: C.value }, null, 8, ["fill"])
            ])
          ], 34))
        ]),
        _: 1
      }),
      d($, null, {
        default: h(() => [
          D(F("div", {
            ref_key: "template",
            ref: e,
            onMouseover: v,
            onMouseout: f
          }, [
            d(O, {
              templates: l.templates,
              "group-templates": l.groupTemplates,
              "elevated-window": l.elevatedWindow,
              "chat-background": l.chatBackground,
              onCloseTemplateWindow: M
            }, null, 8, ["templates", "group-templates", "elevated-window", "chat-background"])
          ], 544), [
            [H, o.state === "active"]
          ])
        ]),
        _: 1
      })
    ], 64));
  }
});
export {
  oe as default
};
