import { isString as G, throttle as J, debounce as Y, forOwn as X, isFunction as Q, isPlainObject as W, isArray as $ } from "lodash-es";
import { at as L, aU as ee, aV as te, aT as ie, _ as se, aW as E, aX as ne, aY as u, af as O, an as oe, aZ as ae, a_ as B, a$ as z, b0 as re, ak as ce, b1 as le, b2 as he, ab as pe, b3 as ue, aJ as F, b4 as R, aN as T, aK as de } from "./index-1e3e8095.js";
import { resolveComponent as g, openBlock as l, createElementBlock as h, createBlock as C, mergeProps as ve, createCommentVNode as p, withDirectives as M, createElementVNode as c, vShow as V, nextTick as j, normalizeClass as _, normalizeStyle as K, withCtx as S, createVNode as f, Fragment as D, toDisplayString as d, withModifiers as k, createTextVNode as A } from "vue";
import me from "./KapixDropDown-dd4161a5.js";
import "axios";
import "@vueuse/core";
import "vue-i18n";
import "./itemSelectOptions-01e8c122.js";
function Z(e = 1e3) {
  return "fr" === "fr" ? "! . ! ," : " , ";
}
function U(e, t = !0) {
  const i = new RegExp(/\^\d+/, "g"), o = [];
  let n = i.exec(e);
  for (; n != null; )
    o.push(n[0]), n = i.exec(e);
  return o && o.forEach((s) => {
    let a = parseInt(s.substring(1, s.length));
    isNaN(a) && (a = 200), e = e.replaceAll(s, t ? Z(a) : "");
  }), t ? e.replaceAll("+", "plusse") : e;
}
function H(e, t = !0) {
  return (G(e) ? U(e, t) : e.map((i) => U(i, t)).join(t ? Z() : "")) + (t ? "." : "");
}
function N() {
  "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 P() {
  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: P(),
      internalAvatar: P(),
      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 J(() => this.randomFace(), 1e3);
    },
    debunceStartSpeech() {
      return Y(this.startSpeech, this.delay || 100);
    },
    textWithoutPause({ content: e }) {
      return e && H(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 ? {
          ...P(),
          ...ee(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((o) => {
        this.promise = o;
      });
      return this.typed = new te(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(H(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 && N());
    },
    stopSpeech(e = !0) {
      this.started = !1, this.resolvePromise(), this.stopFace(), e && N();
    },
    endTheSpeech(e = !0) {
      this.typed && this.typed.stop(), this.stopFace(), e && N(), 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 ie(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, o, n, s) {
  const a = g("KapixAvatars");
  return l(), h("div", xe, [
    i.showAvatar ? (l(), C(a, 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"])) : p("", !0),
    i.showSpeech ? M((l(), h("div", {
      key: 1,
      class: "speech-text",
      onClick: t[0] || (t[0] = (...r) => s.endTheSpeech && s.endTheSpeech(...r))
    }, [
      M(c("div", Te, null, 512), [
        [V, n.started]
      ])
    ], 512)), [
      [V, !n.showFullText]
    ]) : p("", !0),
    i.showSpeech && n.showFullText ? (l(), h("div", _e, [
      c("span", {
        class: "typing",
        innerHTML: s.textWithoutPause
      }, null, 8, Se)
    ])) : p("", !0)
  ]);
}
const we = /* @__PURE__ */ L(be, [["render", ke], ["__scopeId", "data-v-93146fe7"]]);
const Ce = {}, Ie = {
  width: "30",
  height: "40",
  viewBox: "0 0 384 512"
}, Oe = /* @__PURE__ */ c("g", { color: "white" }, [
  /* @__PURE__ */ c("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__ */ c("g", { class: "ka-click-color-blink" }, [
  /* @__PURE__ */ c("path", {
    fill: "currentColor",
    d: "M176 0h-16A160 160 0 0 0 0 160v32h176z"
  })
], -1), De = [
  Oe,
  je
];
function Ae(e, t) {
  return l(), h("svg", Ie, De);
}
const Ne = /* @__PURE__ */ L(Ce, [["render", Ae]]);
const Pe = 250, q = {
  bottom: "50%",
  height: "0",
  left: "50%",
  right: "50%",
  top: "50%",
  width: "0",
  x: "50%",
  y: "50%"
}, Le = {
  components: {
    KaSpeech: we,
    KapixIcon: se,
    KapixDropDown: me,
    MouseLeftClickIcon: Ne
  },
  data() {
    return {
      DEBUG: E,
      tooltipContainerContext: ne,
      currentItem: null,
      targetHtmlElement: null,
      highlightHtmlElement: null,
      targetStyle: q,
      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 u().speechList;
    },
    computedSpeechSpeed: {
      get() {
        return u().speechSpeed;
      },
      set(e) {
        u().setSpeechSpeed(e);
      }
    },
    didacticiel() {
      return u().didacticiel;
    },
    scenario() {
      return u().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 : Y(() => 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, o = e && e.index, n = t && t.step, s = t && t.index, a = s != null ? o < s : !1;
        if (this.stepBusy = !0, u().setCurrentStep(i), i && i !== n) {
          this.isSpeechActive = !0;
          const r = i.onEnter(this, { fromNext: a });
          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, o = e && e.index, n = t && t.objective, s = t && t.index, a = s != null ? o < s : !1;
      if (u().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: a });
          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 v = n.index > i.index, m = this.getCloserItemObjective(i, v);
            m ? (this.to = m.target, this.highlight = m.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(oe);
    e && e.append(this.$el);
  },
  beforeUnmount() {
    this.dispose(), this.$el.remove();
  },
  methods: {
    getBoundingClientRect(e) {
      if (e) {
        const { bottom: t, height: i, left: o, right: n, top: s, width: a, x: r, y: v } = e.getBoundingClientRect(), m = { bottom: t, height: i, left: o, right: n, top: s, width: a, x: r, y: v }, b = ae.breakpoint.width - 5;
        m.width = r + a <= b ? a : a - (r + a - b);
        const x = {};
        return X(m, (y, I) => {
          x[I] = `${y}px`;
        }), { bounds: m, style: x };
      }
    },
    _getTarget(e) {
      return e && (G(e) ? e = e.startsWith(".") ? document.querySelector(e) : B(e) : Q(e) ? e = e(this) : W(e) && (e = e.name ? B(e.name) : e.element)), e;
    },
    async getTarget(e) {
      let t = this._getTarget(e);
      return t || (await j(), t = this._getTarget(e)), t || (await z(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(() => {
            !$(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 o = await this.getTarget(this.highlight);
        if (o) {
          const { style: n } = this.getBoundingClientRect(o);
          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 (E && !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 o;
      const e = (o = ce.user) == null ? void 0 : o.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 = [
            le(he.VIEWPORT_SIZE_CHANGED, this.debounceUpdate)
          ]) : u().setDidacticiel(null);
        } catch (n) {
          console.error(n), u().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, o = 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 === o && (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(), z(Pe);
    },
    addTippy(e) {
      const t = ue(e), { tippyInstances: i, objectiveIndex: o, stepIndex: n } = this;
      if (t && t.setCustomOptions && !i.some((s) => s.tippy === t) && !t.popper.classList.contains("ka-included-tippy")) {
        F(t.popper, "ka-excluded-tippy");
        const s = t.addListener("update", () => this.updateTippyPlacement(e)), a = t.setCustomOptions({ hideOnClick: !1 });
        let r;
        r = {
          tippy: t,
          stepIndex: n,
          objectiveIndex: o,
          dispose: () => {
            s(), R(t.popper, "ka-excluded-tippy"), a(!0), de(i, r);
          }
        }, i.push(r);
      }
    },
    disposeTippy(e = null) {
      const { tippyInstances: t } = this;
      [...t].forEach((o) => {
        o && (!e || e === 1 || o.objectiveIndex === e) && o.dispose();
      });
    },
    addOverlay() {
      F(document.body, "ka-step-no-pointer-event");
    },
    removeOverlay() {
      R(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, u().setDidacticiel(null), this.removePointerEventOnTarget(this.targetHtmlElement), this.to = null, this.highlight = null, this.targetHtmlElement = null, this.highlightHtmlElement = null, this.removeHighlight && this.removeHighlight(), this.targetStyle = q, this.highlightStyle = null, this.targetBounds = null, this.disposeTippy(), this.removeOverlay(), this.listeners.forEach((e) => e && e()), this.listeners = [];
    }
  }
}, Ee = { key: 0 }, Be = { key: 0 }, ze = { class: "step-content" }, Fe = { class: "speed-speech-container" }, Re = { class: "mr-2" }, Me = { class: "step-buttons" }, Ve = { class: "flex flex-col mx-3 text-white text-shadow" }, Ke = {
  key: 0,
  class: "text-size-2.5"
};
function Ue(e, t, i, o, n, s) {
  const a = g("MouseLeftClickIcon"), r = g("tippy"), v = g("KapixIcon"), m = g("KapixDropDown"), b = g("ka-progress-bar"), x = g("KaSpeech");
  return n.tooltipContainerContext.container ? (l(), h("div", Ee, [
    s.isActive ? (l(), h("div", Be, [
      c("div", {
        class: _(["step-container", { clickable: s.clickable, "no-shadow": n.highlightStyle }]),
        style: K(n.targetStyle)
      }, [
        n.currentItem && n.currentItem.isClick ? (l(), 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(a, {
              height: 35,
              width: 35
            })
          ]),
          _: 1
        }, 8, ["visible", "z-index"])) : p("", !0),
        (l(), C(r, {
          key: `step-${n.stepIndex}`,
          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(() => [
            n.stepIndex >= 0 ? (l(), h(D, { key: 0 }, [
              c("div", ze, [
                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(v, {
                      "data-cy": "kapix-didacticiel-options",
                      value: "i-fa-solid:cog"
                    })
                  ]),
                  default: S(({ close: y }) => [
                    c("div", null, [
                      c("div", Fe, [
                        f(v, { value: "i-fa-solid:play-circle mr-2" }),
                        c("span", Re, d(e.$t("didacticiels.speechSpeed.label", "Play speed")), 1),
                        f(m, {
                          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 ? (l(), C(b, {
                  key: 0,
                  class: "ml-1",
                  color: "green",
                  height: "4px",
                  indeterminate: ""
                })) : p("", !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"])
              ]),
              c("div", Me, [
                c("button", {
                  class: "step-button done-button bg-red-500",
                  role: "button",
                  tabindex: "0",
                  small: "",
                  onClick: t[1] || (t[1] = k((y) => s.stopWithConfirm(), ["stop"]))
                }, d(e.$t("didacticiels.buttons.leave", "Leave")), 1),
                c("button", {
                  class: _(["step-button prev-button", { disabled: !s.canPrevious }]),
                  role: "button",
                  tabindex: "-1",
                  small: "",
                  onClick: t[2] || (t[2] = k((y) => s.previous(), ["stop"]))
                }, " ← " + d(e.$t("didacticiels.buttons.previous", "Previous")), 3),
                c("div", Ve, [
                  c("span", null, d(n.stepIndex + 1) + " / " + d(s.steps.length), 1),
                  n.objectiveIndex >= 0 && s.objectives && s.objectives.length ? (l(), h("span", Ke, d(n.objectiveIndex + 1) + " / " + d(s.objectives.length), 1)) : p("", !0)
                ]),
                c("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 ? (l(), h(D, { key: 0 }, [
                    A(d(e.$t("didacticiels.buttons.continue", "Continue")) + " → ", 1)
                  ], 64)) : (l(), h(D, { key: 1 }, [
                    A(d(e.$t("didacticiels.buttons.skip", "Skip")) + " ", 1),
                    f(v, {
                      class: "mx-2",
                      value: "i-fa-solid:ban"
                    })
                  ], 64))
                ], 2),
                n.DEBUG ? (l(), h("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"]))
                }, [
                  A(d(e.$t("didacticiels.buttons.skipAll", "Skip all")) + " ", 1),
                  f(v, {
                    class: "mx-2",
                    value: "i-fa-solid:ban"
                  })
                ], 2)) : p("", !0)
              ])
            ], 64)) : p("", !0)
          ]),
          _: 1
        }, 8, ["visible", "z-index", "placement"]))
      ], 6),
      n.highlightStyle ? (l(), h("div", {
        key: 0,
        class: "step-container highlight",
        style: K(n.highlightStyle)
      }, null, 4)) : p("", !0)
    ])) : p("", !0)
  ])) : p("", !0);
}
const We = /* @__PURE__ */ L(Le, [["render", Ue], ["__scopeId", "data-v-dd59612d"]]);
export {
  We as default
};
