import { defineComponent as T, computed as y, ref as c, onMounted as x, onBeforeUnmount as R, watch as h, createElementBlock as u, openBlock as f, createVNode as D, withCtx as O, createElementVNode as a, normalizeClass as d, toDisplayString as p } from "vue";
import b from "../../1_atoms/Tooltip/Tooltip.vue.js";
const k = {
  key: 0,
  class: "delimiter-message__tooltip-root"
}, N = { class: "delimiter-message__text" }, I = { class: "delimiter-message__text" }, A = 3e3, E = 400, B = /* @__PURE__ */ T({
  __name: "DelimiterMessage",
  props: {
    message: {
      type: Object,
      required: !0
    },
    /** Текст подсказки при наведении. Если не передан — берётся из message.tooltipText */
    tooltipText: {
      type: String,
      default: ""
    },
    /** Позиция тултипа: top | right | bottom | left | bottom-left | top-center */
    tooltipPosition: {
      type: String,
      default: "top-center"
    },
    /** Отступ тултипа от элемента (px) */
    tooltipOffset: {
      type: Number,
      default: 8
    },
    /** Задержка показа тултипа (ms) */
    tooltipDelay: {
      type: Number,
      default: 100
    }
  },
  emits: ["read"],
  setup(o, { emit: g }) {
    const i = o, r = y(
      () => i.tooltipText || i.message.tooltipText || ""
    ), v = g, s = c(null), l = c(!1);
    let t = null, e = null;
    const m = () => {
      !i.message.autoRemove || !s.value || (t = new IntersectionObserver(
        (n) => {
          n[0].isIntersecting ? (e && clearTimeout(e), e = setTimeout(() => {
            l.value = !0, t && s.value && (t.disconnect(), t = null), setTimeout(() => {
              v("read", i.message.messageId);
            }, E);
          }, A)) : e && (clearTimeout(e), e = null);
        },
        {
          threshold: 0.75,
          // Элемент должен быть виден минимум на 75%
          rootMargin: "0px"
        }
      ), t.observe(s.value));
    };
    return x(() => {
      i.message.autoRemove && setTimeout(() => {
        m();
      }, 100);
    }), R(() => {
      e && (clearTimeout(e), e = null), t && (t.disconnect(), t = null);
    }), h(
      () => i.message.autoRemove,
      (n) => {
        t && (t.disconnect(), t = null), e && (clearTimeout(e), e = null), n && setTimeout(() => {
          m();
        }, 100);
      }
    ), (n, _) => r.value ? (f(), u("div", k, [
      D(b, {
        text: r.value,
        position: o.tooltipPosition,
        offset: o.tooltipOffset,
        delay: o.tooltipDelay
      }, {
        default: O(() => [
          a("div", {
            ref_key: "containerRef",
            ref: s,
            class: d(["delimiter-message__container", { "delimiter-message__container--removing": l.value }])
          }, [
            a("p", N, p(o.message.text), 1)
          ], 2)
        ]),
        _: 1
      }, 8, ["text", "position", "offset", "delay"])
    ])) : (f(), u("div", {
      key: 1,
      ref_key: "containerRef",
      ref: s,
      class: d(["delimiter-message__container", { "delimiter-message__container--removing": l.value }])
    }, [
      a("p", I, p(o.message.text), 1)
    ], 2));
  }
});
export {
  B as default
};
