import { isString as q, throttle as Z, debounce as G, forOwn as J, isFunction as X, isPlainObject as Q, isArray as W } from "lodash-es";
import { at as P, aU as $, aV as ee, aT as te, _ as ie, aW as se, aX as h, ae as O, an as ne, aY as ae, aZ as L, a_ as E, a$ as oe, b0 as re, ak as le, b1 as ce, b2 as he, ab as pe, b3 as ue, aJ as B, b4 as z, aN as T, aK as de } from "./index-d46d84f5.js";
import { resolveComponent as g, openBlock as c, createElementBlock as u, createBlock as C, mergeProps as ve, createCommentVNode as m, withDirectives as F, createElementVNode as l, vShow as R, nextTick as j, normalizeClass as _, normalizeStyle as M, withCtx as S, createVNode as f, toDisplayString as p, withModifiers as k, Fragment as V, createTextVNode as D } from "vue";
import me from "./KapixDropDown-e060a22e.js";
import "axios";
import "@vueuse/core";
import "vue-i18n";
import "./externalApi-c841f786.js";
function Y(e = 1e3) {
  return "fr" === "fr" ? "! . ! ," : " , ";
}
function K(e, t = !0) {
  const i = new RegExp(/\^\d+/, "g"), a = [];
  let n = i.exec(e);
  for (; n != null; )
    a.push(n[0]), n = i.exec(e);
  return a && a.forEach((s) => {
    let o = parseInt(s.substring(1, s.length));
    isNaN(o) && (o = 200), e = e.replaceAll(s, t ? Y(o) : "");
  }), t ? e.replaceAll("+", "plusse") : e;
}
function U(e, t = !0) {
  return (q(e) ? K(e, t) : e.map((i) => K(i, t)).join(t ? Y() : "")) + (t ? "." : "");
}
function A() {
  "speechSynthesis" in window && window.speechSynthesis.cancel();
}
async function fe(e, t = "MALE") {
}
const ye = (e) => {
  let t = 0;
  for (; e; )
    t += e % 10, e = Math.floor(e / 10);
  return t;
}, ge = (e) => {
  const t = ye(e);
  return t === 0 || t === 3 || t === 6 || t === 9;
};
function N() {
  return {
    topType: "ShortHairDreads01",
    accessoriesType: "Round",
    topColor: "PastelOrange",
    hairColor: "#764E31FF",
    facialHairType: "Blank",
    facialHairColor: "Platinum",
    clotheType: "BlazerShirt",
    clotheColor: "White",
    eyeType: "Happy",
    eyebrowType: "DefaultNatural",
    mouthType: "Smile",
    skinColor: "DarkBrown",
    // avatarStyle: 'Transparent',
    graphicType: "Diamond"
  };
}
let w = 0;
const be = {
  name: "Speech",
  props: {
    avatar: {
      type: Object,
      required: !1,
      default: null
    },
    size: {
      type: Array,
      default() {
        return [100, 100];
      }
    },
    content: {
      type: Array,
      default: void 0
    },
    delay: {
      type: Number,
      default: 0
    },
    showAvatar: {
      type: Boolean,
      default: !0
    },
    showSpeech: {
      type: Boolean,
      default: !0
    },
    stopOnCompleted: {
      type: Boolean,
      default: !1
    }
  },
  data() {
    return {
      defaultAvatar: N(),
      internalAvatar: N(),
      started: !1,
      paused: !1,
      startedAt: null,
      text: null,
      typed: null,
      promise: null,
      showFullText: !1
    };
  },
  computed: {
    computedAvatar() {
      return this.avatar || this.defaultAvatar;
    },
    avatarStyle({ size: e }) {
      const t = `${e[0]}px`, i = `${e[1]}px`;
      return {
        height: t,
        width: i,
        minHeight: t,
        minWidth: i
      };
    },
    onMouseOver() {
      return Z(() => this.randomFace(), 1e3);
    },
    debunceStartSpeech() {
      return G(this.startSpeech, this.delay || 100);
    },
    textWithoutPause({ content: e }) {
      return e && U(e, !1);
    }
  },
  watch: {
    content: {
      immediate: !0,
      handler(e, t) {
        clearTimeout(this.startSpeechTimeout), e ? e !== t && (this.stopSpeech(), this.debunceStartSpeech(e)) : this.stopSpeech();
      }
    },
    computedAvatar: {
      immediate: !0,
      handler(e) {
        this.internalAvatar = e ? {
          ...N(),
          ...$(e)
        } : null;
      }
    }
  },
  mounted() {
  },
  beforeUnmount() {
    this.stopSpeech();
  },
  methods: {
    startSpeech(e) {
      clearTimeout(this.onCompletedTimeout), this.showFullText = !1, this.started = !0, this.startedAt = /* @__PURE__ */ new Date(), this.clearTyped(), this.startFace(), this.text = e, this.startVoice();
      const t = this.$refs.typedElement, i = new Promise((a) => {
        this.promise = a;
      });
      return this.typed = new ee(t, Object.freeze({
        strings: e,
        typeSpeed: 30,
        backSpeed: 60,
        fadeOut: !0,
        cursor: !1,
        smartBackspace: !0,
        onBeforeNextSentence: this.onBeforeNextSentence,
        onComplete: this.onCompleted,
        onTypedChar: this.onTypedChar
        // preStringTyped: this.onTypedChar,
        // onStringTyped: this.onTypedChar
      })), i;
    },
    startVoice(e = 0) {
      this.voicePromise = fe(U(this.text[e]));
    },
    async onBeforeNextSentence(e) {
      this.text[e] && (this.voicePromise && await this.voicePromise, this.startVoice(e));
    },
    onCompleted() {
      clearTimeout(this.onCompletedTimeout), this.onCompletedTimeout = setTimeout(() => {
        this.stopOnCompleted ? this.stopSpeech(!1) : this.pauseSpeech(!1), this.$emit("completed");
      }, 500);
    },
    resumeSpeech() {
      this.paused && this.typed && (this.typed.start(), this.paused = !1);
    },
    pauseSpeech(e = !0) {
      this.typed && (this.paused = !0, this.typed.stop(), e && A());
    },
    stopSpeech(e = !0) {
      this.started = !1, this.resolvePromise(), this.stopFace(), e && A();
    },
    endTheSpeech(e = !0) {
      this.typed && this.typed.stop(), this.stopFace(), e && A(), this.showFullText = !0, this.onCompleted();
    },
    resolvePromise() {
      this.promise && (this.promise(), this.promise = null);
    },
    startFace() {
      const { internalAvatar: e } = this;
      e.eyeType = "Default", e.eyebrowType = "DefaultNatural", e.mouthType = "Twinkle";
    },
    stopFace() {
      const { internalAvatar: e } = this;
      e.eyeType = "Default";
    },
    randomElementDifferentElement(e, t) {
      return te(t.filter((i) => i !== e));
    },
    onTypedChar() {
      const { internalAvatar: e, randomElementDifferentElement: t } = this;
      w++, w > 10 && (e.eyeType = t(e.eyeType, [
        // 'Close',
        "Default",
        "Default",
        "Happy"
        // 'Side'
      ]), e.eyebrowType = t(e.eyebrowType, [
        "DefaultNatural",
        "DefaultNatural",
        "DefaultNatural",
        "DefaultNatural",
        "Default",
        "RaisedExcitedNatural"
      ]), w = 0), ge(w) && (e.mouthType = t(e.mouthType, [
        "Default",
        "Smile",
        "Twinkle"
      ]));
    },
    clearTyped() {
      this.typed && this.typed.destroy();
    },
    randomFace() {
      if (!this.started || this.paused) {
        const { internalAvatar: e, randomElementDifferentElement: t } = this;
        e.eyeType = t(e.eyeType, [
          // 'Close',
          "Default",
          "Default",
          "Happy"
          // 'Side'
        ]), e.eyebrowType = t(e.eyebrowType, [
          "DefaultNatural",
          "DefaultNatural",
          "DefaultNatural",
          "DefaultNatural",
          "Default",
          "RaisedExcitedNatural"
        ]), e.mouthType = t(e.mouthType, [
          "Default",
          "Smile",
          "Twinkle"
        ]);
      }
    },
    onMouseLeave() {
      this.started || this.stopFace();
    }
  }
}, xe = { class: "speech-container" }, Te = {
  ref: "typedElement",
  class: "typing"
}, _e = {
  key: 2,
  class: "speech-text"
}, Se = ["innerHTML"];
function ke(e, t, i, a, n, s) {
  const o = g("KapixAvatars");
  return c(), u("div", xe, [
    i.showAvatar ? (c(), C(o, ve({ key: 0 }, n.internalAvatar, {
      class: "speech-avatar",
      name: "speech-avatar",
      style: s.avatarStyle,
      onMouseover: s.onMouseOver,
      onMouseleave: s.onMouseLeave
    }), null, 16, ["style", "onMouseover", "onMouseleave"])) : m("", !0),
    i.showSpeech ? F((c(), u("div", {
      key: 1,
      class: "speech-text",
      onClick: t[0] || (t[0] = (...r) => s.endTheSpeech && s.endTheSpeech(...r))
    }, [
      F(l("div", Te, null, 512), [
        [R, n.started]
      ])
    ], 512)), [
      [R, !n.showFullText]
    ]) : m("", !0),
    i.showSpeech && n.showFullText ? (c(), u("div", _e, [
      l("span", {
        class: "typing",
        innerHTML: s.textWithoutPause
      }, null, 8, Se)
    ])) : m("", !0)
  ]);
}
const we = /* @__PURE__ */ P(be, [["render", ke], ["__scopeId", "data-v-93146fe7"]]);
const Ce = {}, Ie = {
  width: "30",
  height: "40",
  viewBox: "0 0 384 512"
}, Oe = /* @__PURE__ */ l("g", { color: "white" }, [
  /* @__PURE__ */ l("path", {
    fill: "currentColor",
    d: "M0 352a160 160 0 0 0 160 160h64a160 160 0 0 0 160-160V224H0zM176 0h-16A160 160 0 0 0 0 160v32h176zm40 0h-16v192h176v-32A160 160 0 0 0 224 0z"
  })
], -1), je = /* @__PURE__ */ l("g", { class: "ka-click-color-blink" }, [
  /* @__PURE__ */ l("path", {
    fill: "currentColor",
    d: "M176 0h-16A160 160 0 0 0 0 160v32h176z"
  })
], -1), De = [
  Oe,
  je
];
function Ae(e, t) {
  return c(), u("svg", Ie, De);
}
const Ne = /* @__PURE__ */ P(Ce, [["render", Ae]]);
const Pe = 250, H = {
  bottom: "50%",
  height: "0",
  left: "50%",
  right: "50%",
  top: "50%",
  width: "0",
  x: "50%",
  y: "50%"
}, Le = {
  components: {
    KaSpeech: we,
    KapixIcon: ie,
    KapixDropDown: me,
    MouseLeftClickIcon: Ne
  },
  data() {
    return {
      tooltipContainerContext: se,
      currentItem: null,
      targetHtmlElement: null,
      highlightHtmlElement: null,
      targetStyle: H,
      highlightStyle: null,
      targetBounds: null,
      to: null,
      highlight: null,
      isSpeechActive: !1,
      zIndex: 9999999,
      animationDelay: 1e3,
      // 1sec
      stepBusy: !1,
      stepIndex: -1,
      objectiveIndex: -1,
      tippyInstances: [],
      listeners: [],
      targetListeners: [],
      resourcesLoading: !1
    };
  },
  computed: {
    speechSpeedList() {
      return h().speechList;
    },
    computedSpeechSpeed: {
      get() {
        return h().speechSpeed;
      },
      set(e) {
        h().setSpeechSpeed(e);
      }
    },
    didacticiel() {
      return h().didacticiel;
    },
    scenario() {
      return h().scenario;
    },
    steps({ scenario: e }) {
      return e == null ? void 0 : e.steps;
    },
    stepWrapper({ steps: e, stepIndex: t }) {
      return e && {
        step: e[t],
        index: t
      };
    },
    step({ stepWrapper: e }) {
      return e && e.step;
    },
    objectives({ step: e }) {
      return e && e.objectives;
    },
    objectiveWrapper({ objectives: e, objectiveIndex: t }) {
      return e && {
        objective: e[t],
        index: t
      };
    },
    objective({ objectiveWrapper: e }) {
      return e && e.objective;
    },
    // currentItem () {
    //   return this.objective || this.step
    // },
    isActive() {
      return !!this.step;
    },
    clickable({ objective: e }) {
      return e && e.isClick;
    },
    isFirstStep() {
      return this.stepIndex === 0;
    },
    isLastStep() {
      return this.steps && this.stepIndex === this.steps.length - 1;
    },
    isFirstObjective() {
      return this.objectiveIndex === 0;
    },
    isLastObjective() {
      return this.objectives && this.objectiveIndex === this.objectives.length - 1;
    },
    // lastObjectiveIsClick ({ isLastObjective }) {
    //   return isLastObjective && this.objectives[this.objectiveIndex].isClick
    // },
    canPreviousStep() {
      return !this.isFirstStep;
    },
    canNextStep() {
      return !this.isLastStep;
    },
    canPreviousObjective() {
      return !this.isFirstObjective;
    },
    canNextObjective() {
      return !this.isLastObjective;
    },
    canNext({ step: e }) {
      return e && !e.objectives || this.objective && !this.objective.isRequired;
    },
    canPrevious({ step: e }) {
      return this.isFirstStep ? this.objectiveIndex > 0 && (!this.objective || this.objective.canPrevious) : e && !e.objectives || this.objective && this.objective.canPrevious;
    },
    canContinue({ objective: e }) {
      return !e || !e.isRequired && !e.isClick || e.isClick && e.isBlocked;
    },
    // showPrevNext () {
    //   return this.isLastStep ? (this.objectives ? !this.isLastObjective : false) : true
    // },
    showContinue() {
      return !this.isSpeechActive && this.canContinue;
    },
    debounceUpdate() {
      return this.stepBusy ? NOOP_FUNCTION : G(() => this.init(!1), 200);
    },
    contentPlacement({ objective: e, step: t }) {
      return e && e.contentPlacement || t.contentPlacement;
    }
  },
  watch: {
    scenario: {
      immediate: !0,
      handler(e) {
        e && this.start();
      }
    },
    async stepWrapper(e, t) {
      try {
        const i = e && e.step, a = e && e.index, n = t && t.step, s = t && t.index, o = s != null ? a < s : !1;
        if (this.stepBusy = !0, h().setCurrentStep(i), i && i !== n) {
          this.isSpeechActive = !0;
          const r = i.onEnter(this, { fromNext: o });
          O(r) && (await r, await j()), this.currentItem = i, this.to = i.target, this.init();
        }
      } finally {
        this.stepBusy = !1;
      }
    },
    async objectiveWrapper(e, t) {
      const i = e && e.objective, a = e && e.index, n = t && t.objective, s = t && t.index, o = s != null ? a < s : !1;
      if (h().setCurrentObjective(i), T.hideOnClick = !0, n && n.clearListeners(), i && i !== n)
        if (this.isSpeechActive = !0, i.clearListeners(), i.skip && i.skip(this))
          this.nextObjective();
        else {
          const r = i.onEnter(this, { fromNext: o });
          if (O(r) && (await r, await j()), this.currentItem = i, i.target)
            this.to = i.target, this.highlight = i.highlight, await this.init();
          else if (n && n.target) {
            const d = n.index > i.index, v = this.getCloserItemObjective(i, d);
            v ? (this.to = v.target, this.highlight = v.highlight) : (this.to = null, this.highlight = null), await this.init();
          }
          this.clickHandler(i);
        }
    },
    isActive(e) {
      e ? this.addOverlay() : this.dispose();
    }
  },
  mounted() {
    const e = document.getElementById(ne);
    e && e.append(this.$el);
  },
  beforeUnmount() {
    this.dispose(), this.$el.remove();
  },
  methods: {
    getBoundingClientRect(e) {
      if (e) {
        const { bottom: t, height: i, left: a, right: n, top: s, width: o, x: r, y: d } = e.getBoundingClientRect(), v = { bottom: t, height: i, left: a, right: n, top: s, width: o, x: r, y: d }, b = ae.breakpoint.width - 5;
        v.width = r + o <= b ? o : o - (r + o - b);
        const x = {};
        return J(v, (y, I) => {
          x[I] = `${y}px`;
        }), { bounds: v, style: x };
      }
    },
    _getTarget(e) {
      return e && (q(e) ? e = e.startsWith(".") ? document.querySelector(e) : L(e) : X(e) ? e = e(this) : Q(e) && (e = e.name ? L(e.name) : e.element)), e;
    },
    async getTarget(e) {
      let t = this._getTarget(e);
      return t || (await j(), t = this._getTarget(e)), t || (await E(1e3), t = this._getTarget(e)), t;
    },
    updateTippyPlacement(e) {
      const { style: t, bounds: i } = this.getBoundingClientRect(e);
      this.targetBounds = i, this.targetStyle = t;
    },
    removeTargetResizeObserver() {
      this.targetListeners.length && (this.targetListeners.forEach((e) => e()), this.targetListeners = []);
    },
    setTargetResizeObserver(e) {
      if (this.removeTargetResizeObserver(), typeof ResizeObserver < "u" && e) {
        const t = new ResizeObserver((i) => {
          window.requestAnimationFrame(() => {
            !W(i) || !i.length || this.updateTippyPlacement(e);
          });
        });
        t.observe(e), this.targetListeners = [
          () => t.disconnect()
        ];
      }
    },
    async updateTarget(e) {
      this.removeTargetResizeObserver(), e && this.removePointerEventOnTarget(this.targetHtmlElement);
      const t = await this.getTarget(this.to);
      this.targetHtmlElement = t;
      const i = this.scrollToTarget(t);
      if (O(i) && await i, t) {
        this.updateTippyPlacement(t), this.setTargetResizeObserver(t);
        const a = await this.getTarget(this.highlight);
        if (a) {
          const { style: n } = this.getBoundingClientRect(a);
          this.highlightStyle = n;
        } else
          this.highlightStyle = null;
      } else
        this.targetStyle = null, this.highlightStyle = null;
      return t;
    },
    async init(e = !0) {
      if (this.isActive && this.currentItem) {
        const t = await this.updateTarget(e);
        if (oe && !t && console.log(`DIDACTICIEL TARGET : ${this.to} NOT FOUND`), t) {
          this.addTippy(t), this.removeHighlight && this.removeHighlight();
          const i = re(t);
          this.removeHighlight = i, setTimeout(i, 1050);
        } else
          this.next();
      }
    },
    async createDidacticielInstance(e, t) {
    },
    async start() {
      var a;
      const e = (a = le.user) == null ? void 0 : a.userName, { didacticiel: t, scenario: i } = this;
      if (i)
        try {
          await i.onStart(this) !== !1 ? (t.requiredInstance && e && await this.createDidacticielInstance(t, e), this.stepIndex = 0, this.objectiveIndex = -1, this.listeners = [
            ce(he.VIEWPORT_SIZE_CHANGED, this.debounceUpdate)
          ]) : h().setDidacticiel(null);
        } catch (n) {
          console.error(n), h().setDidacticiel(null);
        }
      else
        console.warn("No scenario found");
    },
    stopWithConfirm() {
      const { stop: e } = this;
      e();
    },
    async stop() {
      const { didacticiel: e, scenario: t } = this;
      if (t) {
        const i = this.stepIndex, a = t.steps.length - 1;
        this.step && await this.step.onLeave(this), this.stepIndex = -1, this.objectiveIndex = -1, T.hideOnClick = !0, await t.onStop(this), i === a && (await t.onComplete(this, e), e.completed = !0);
      } else
        console.warn("No Didacticiel found");
    },
    skipAll() {
      this.stepIndex = this.steps.length - 1, this.objectiveIndex = -1;
    },
    checkPrevObjectiveTarget(e, t) {
      const i = e.objectives[t];
      return i.target && !this._getTarget(i.target) ? (t--, this.checkPrevObjectiveTarget(e, t)) : t;
    },
    async previousStep() {
      if (this.disposeTippy(), this.canPreviousStep) {
        this.objectiveIndex = -1, this.step && await this.step.onPrevious(this);
        try {
          const e = this.steps[this.stepIndex - 1];
          if (e) {
            const t = this.checkPrevObjectiveTarget(e, e.objectives.length - 1);
            this.objectiveIndex = t;
          }
        } catch (e) {
          console.error(e);
        }
        this.stepIndex--;
      } else
        this.stop();
    },
    async nextStep() {
      this.disposeTippy(), this.canNextStep ? (this.objectiveIndex = -1, this.step && await this.step.onNext(this), this.stepIndex++) : this.stop();
    },
    async previousObjective() {
      this.canPreviousObjective ? (this.disposeTippy(this.objectiveIndex), this.objective && await this.objective.onPrevious(this), this.objectiveIndex = this.checkPrevObjectiveTarget(this.step, this.objectiveIndex - 1)) : this.previousStep();
    },
    async nextObjective() {
      this.canNextObjective ? (this.objective && await this.objective.onNext(this), this.objectiveIndex++) : this.nextStep();
    },
    completeObjective() {
      this.nextObjective();
    },
    previous() {
      this.step && !this.step.objectives ? this.previousStep() : this.objective && this.previousObjective();
    },
    next() {
      const { step: e, objective: t } = this;
      t && this.canContinue ? this.nextObjective() : e && this.nextStep();
    },
    onObjectiveClicked(e) {
      return setTimeout(async () => {
        try {
          this.resourcesLoading = !0;
        } finally {
          this.resourcesLoading = !1, e && e(), T.hideOnClick = !0;
        }
      }, 500);
    },
    clickHandler(e) {
      if (e.isClick) {
        const { targetHtmlElement: t } = this;
        this.addPointerEventOnTarget(t), T.hideOnClick = !1;
        const i = () => {
          this.removeTargetResizeObserver(), e.isBlocked ? (clearTimeout(e.clickTimeout), e.clearListeners(), e.to ? this.onObjectiveClicked(() => {
            this._getTarget(e.to) || this.completeObjective();
          }) : this.onObjectiveClicked()) : (this.removePointerEventOnTarget(t), e.clearListeners(), this.onObjectiveClicked(this.completeObjective));
        };
        e.addListener(pe(t, "click", i));
      } else if (e.isDbClick)
        throw new Error("Double Click is not implemented yet");
    },
    getCloserItemObjective(e, t = !1) {
      if (t) {
        const i = this.objectiveIndex - 1;
        return e && !e.target && this.objectives[i] ? this.objectiveIndex-- && this.getCloserItemObjective(this.objectives[i]) : e && e.target ? e : this.step;
      } else {
        const i = this.objectiveIndex + 1;
        return e && !e.target && this.objectives[i] ? this.objectiveIndex++ && this.getCloserItemObjective(this.objectives[i]) : e && e.target ? e : this.step;
      }
    },
    async scrollToTarget(e) {
      return e && e.scrollIntoView(), E(Pe);
    },
    addTippy(e) {
      const t = ue(e), { tippyInstances: i, objectiveIndex: a, stepIndex: n } = this;
      if (t && t.setCustomOptions && !i.some((s) => s.tippy === t) && !t.popper.classList.contains("ka-included-tippy")) {
        B(t.popper, "ka-excluded-tippy");
        const s = t.addListener("update", () => this.updateTippyPlacement(e)), o = t.setCustomOptions({ hideOnClick: !1 });
        let r;
        r = {
          tippy: t,
          stepIndex: n,
          objectiveIndex: a,
          dispose: () => {
            s(), z(t.popper, "ka-excluded-tippy"), o(!0), de(i, r);
          }
        }, i.push(r);
      }
    },
    disposeTippy(e = null) {
      const { tippyInstances: t } = this;
      [...t].forEach((a) => {
        a && (!e || e === 1 || a.objectiveIndex === e) && a.dispose();
      });
    },
    addOverlay() {
      B(document.body, "ka-step-no-pointer-event");
    },
    removeOverlay() {
      z(document.body, "ka-step-no-pointer-event");
    },
    addPointerEventOnTarget(e) {
      e && (e.setAttribute("target", "ka-show-step-element"), this.updateTippyPlacement(e));
    },
    removePointerEventOnTarget(e) {
      e && e.removeAttribute("target");
    },
    async onSpeechCompleted() {
      const { step: e } = this;
      if (e) {
        this.isSpeechActive = !1, await e.onSpeechEnd(this);
        const { objectives: t } = e;
        t && this.objectiveIndex < 0 && this.nextObjective();
      }
    },
    dispose() {
      this.removeTargetResizeObserver(), this.resourcesLoading = !1, this.currentItem = null, this.stepIndex = -1, this.stepBusy = !1, this.objectiveIndex = -1, this.isSpeechActive = !1, h().setDidacticiel(null), this.removePointerEventOnTarget(this.targetHtmlElement), this.to = null, this.highlight = null, this.targetHtmlElement = null, this.highlightHtmlElement = null, this.removeHighlight && this.removeHighlight(), this.targetStyle = H, this.highlightStyle = null, this.targetBounds = null, this.disposeTippy(), this.removeOverlay(), this.listeners.forEach((e) => e && e()), this.listeners = [];
    }
  }
}, Ee = { key: 0 }, Be = { class: "step-content" }, ze = { class: "speed-speech-container" }, Fe = { class: "mr-2" }, Re = { class: "step-buttons" }, Me = { class: "flex flex-col mx-3 text-white text-shadow" }, Ve = {
  key: 0,
  class: "text-size-2.5"
};
function Ke(e, t, i, a, n, s) {
  const o = g("MouseLeftClickIcon"), r = g("tippy"), d = g("KapixIcon"), v = g("KapixDropDown"), b = g("ka-progress-bar"), x = g("KaSpeech");
  return s.isActive && n.tooltipContainerContext.container ? (c(), u("div", Ee, [
    l("div", {
      class: _(["step-container", { clickable: s.clickable, "no-shadow": n.highlightStyle }]),
      style: M(n.targetStyle)
    }, [
      n.currentItem && n.currentItem.isClick ? (c(), C(r, {
        key: `step-actions-${n.stepIndex}`,
        visible: s.isActive,
        "hide-on-click": !1,
        "flip-on-update": !0,
        sticky: !0,
        "z-index": n.zIndex,
        distance: 10,
        placement: "right",
        "max-width": "100%",
        animation: "shift-toward",
        theme: "no",
        trigger: "manual",
        interactive: "",
        multiple: ""
      }, {
        default: S(() => [
          f(o, {
            height: 35,
            width: 35
          })
        ]),
        _: 1
      }, 8, ["visible", "z-index"])) : m("", !0),
      (c(), C(r, {
        key: `step-${n.stepIndex}`,
        ref: "mainTippy",
        visible: s.isActive,
        "hide-on-click": !1,
        "flip-on-update": !0,
        animation: !1,
        sticky: !0,
        "z-index": n.zIndex,
        distance: 50,
        placement: s.contentPlacement,
        "class-name": "ka-included-tippy speech",
        "max-width": "100%",
        theme: "no",
        trigger: "manual",
        interactive: "",
        multiple: ""
      }, {
        default: S(() => [
          l("div", Be, [
            f(r, {
              class: "speech-options",
              "class-name": "ka-included-tippy speech",
              theme: "light",
              "flip-on-update": !0,
              distance: 10,
              arrow: "",
              sticky: !0,
              placement: "left-start",
              interactive: "",
              "hide-on-click": "toggle",
              trigger: "click"
            }, {
              trigger: S(() => [
                f(d, {
                  "data-cy": "kapix-didacticiel-options",
                  value: "i-fa-solid:cog"
                })
              ]),
              default: S(({ close: y }) => [
                l("div", null, [
                  l("div", ze, [
                    f(d, { value: "i-fa-solid:play-circle mr-2" }),
                    l("span", Fe, p(e.$t("didacticiels.speechSpeed.label", "Play speed")), 1),
                    f(v, {
                      modelValue: s.computedSpeechSpeed,
                      "onUpdate:modelValue": t[0] || (t[0] = (I) => s.computedSpeechSpeed = I),
                      "data-cy-input": "kapix-didacticiel-speech-speed",
                      class: "speed-selection",
                      "class-name": "ka-included-tippy speech",
                      "item-text": "label",
                      "item-value": "value",
                      items: s.speechSpeedList,
                      onClosed: y
                    }, null, 8, ["modelValue", "items", "onClosed"])
                  ])
                ])
              ]),
              _: 1
            }),
            n.resourcesLoading ? (c(), C(b, {
              key: 0,
              class: "ml-1",
              color: "green",
              height: "4px",
              indeterminate: ""
            })) : m("", !0),
            f(x, {
              class: "full-size",
              "show-avatar": s.step.showAvatar,
              avatar: {
                ...(s.scenario || {}).avatar,
                ...(s.step || {}).avatar,
                ...(s.objective || {}).avatar
              },
              content: n.currentItem && n.currentItem.content,
              delay: n.animationDelay,
              onCompleted: s.onSpeechCompleted
            }, null, 8, ["show-avatar", "avatar", "content", "delay", "onCompleted"])
          ]),
          l("div", Re, [
            l("button", {
              class: "step-button done-button bg-red-500",
              role: "button",
              tabindex: "0",
              small: "",
              onClick: t[1] || (t[1] = k((y) => s.stopWithConfirm(), ["stop"]))
            }, p(e.$t("didacticiels.buttons.leave", "Leave")), 1),
            l("button", {
              class: _(["step-button prev-button", { disabled: !s.canPrevious }]),
              role: "button",
              tabindex: "-1",
              small: "",
              onClick: t[2] || (t[2] = k((y) => s.previous(), ["stop"]))
            }, " ← " + p(e.$t("didacticiels.buttons.previous", "Previous")), 3),
            l("div", Me, [
              l("span", null, p(n.stepIndex + 1) + " / " + p(s.steps.length), 1),
              n.objectiveIndex >= 0 && s.objectives && s.objectives.length ? (c(), u("span", Ve, p(n.objectiveIndex + 1) + " / " + p(s.objectives.length), 1)) : m("", !0)
            ]),
            l("button", {
              class: _(["step-button next-button", [s.showContinue && "highlight perpetual-animation beat", !s.canNext && "disabled"]]),
              role: "button",
              small: "",
              onClick: t[3] || (t[3] = k((y) => s.next(), ["stop"]))
            }, [
              s.showContinue ? (c(), u(V, { key: 0 }, [
                D(p(e.$t("didacticiels.buttons.continue", "Continue")) + " → ", 1)
              ], 64)) : (c(), u(V, { key: 1 }, [
                D(p(e.$t("didacticiels.buttons.skip", "Skip")) + " ", 1),
                f(d, {
                  class: "mx-2",
                  value: "i-fa-solid:ban"
                })
              ], 64))
            ], 2),
            e.$debug ? (c(), u("button", {
              key: 0,
              class: _([{ disabled: n.stepIndex === s.steps.length - 1 }, "step-button next-button"]),
              role: "button",
              small: "",
              onClick: t[4] || (t[4] = k((y) => s.skipAll(), ["stop"]))
            }, [
              D(p(e.$t("didacticiels.buttons.skipAll", "Skip all")) + " ", 1),
              f(d, {
                class: "mx-2",
                value: "i-fa-solid:ban"
              })
            ], 2)) : m("", !0)
          ])
        ]),
        _: 1
      }, 8, ["visible", "z-index", "placement"]))
    ], 6),
    n.highlightStyle ? (c(), u("div", {
      key: 0,
      class: "step-container highlight",
      style: M(n.highlightStyle)
    }, null, 4)) : m("", !0)
  ])) : m("", !0);
}
const Qe = /* @__PURE__ */ P(Le, [["render", Ke], ["__scopeId", "data-v-6499e01b"]]);
export {
  Qe as default
};
