import { debounce as K, forOwn as F, isString as U, isFunction as V, isPlainObject as M, isArray as q } from "lodash-es";
import { at as E, aU as G, _ as Y, aV as L, aW as Z, aX as h, af as T, an as J, aY as X, aZ as N, a_ as A, a$ as Q, ak as H, b0 as W, b1 as $, ab as ee, b2 as te, aJ as D, b3 as z, aN as k, aK as ie } from "./index-691eb34d.js";
import { openBlock as l, createElementBlock as v, createElementVNode as r, nextTick as j, resolveComponent as f, normalizeClass as I, normalizeStyle as B, createBlock as S, withCtx as _, createVNode as g, createCommentVNode as m, Fragment as w, toDisplayString as d, withModifiers as C, createTextVNode as P } from "vue";
import se from "./KapixDropDown-317c1007.js";
import "axios";
import "@vueuse/core";
import "vue-i18n";
import "./itemSelectOptions-c72ecc3e.js";
const ne = {}, oe = {
  width: "30",
  height: "40",
  viewBox: "0 0 384 512"
}, ce = /* @__PURE__ */ r("g", { color: "white" }, [
  /* @__PURE__ */ r("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), re = /* @__PURE__ */ r("g", { class: "ka-click-color-blink" }, [
  /* @__PURE__ */ r("path", {
    fill: "currentColor",
    d: "M176 0h-16A160 160 0 0 0 0 160v32h176z"
  })
], -1), ae = [
  ce,
  re
];
function le(e, t) {
  return l(), v("svg", oe, ae);
}
const he = /* @__PURE__ */ E(ne, [["render", le]]);
const de = 250, R = {
  bottom: "50%",
  height: "0",
  left: "50%",
  right: "50%",
  top: "50%",
  width: "0",
  x: "50%",
  y: "50%"
}, pe = {
  components: {
    KaSpeech: G,
    KapixIcon: Y,
    KapixDropDown: se,
    MouseLeftClickIcon: he
  },
  data() {
    return {
      DEBUG: L,
      tooltipContainerContext: Z,
      currentItem: null,
      targetHtmlElement: null,
      highlightHtmlElement: null,
      targetStyle: R,
      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 : K(() => 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, s = t && t.step, n = t && t.index, a = n != null ? o < n : !1;
        if (this.stepBusy = !0, h().setCurrentStep(i), i && i !== s) {
          this.isSpeechActive = !0;
          const c = i.onEnter(this, { fromNext: a });
          T(c) && (await c, 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, s = t && t.objective, n = t && t.index, a = n != null ? o < n : !1;
      if (h().setCurrentObjective(i), k.hideOnClick = !0, s && s.clearListeners(), i && i !== s)
        if (this.isSpeechActive = !0, i.clearListeners(), i.skip && i.skip(this))
          this.nextObjective();
        else {
          const c = i.onEnter(this, { fromNext: a });
          if (T(c) && (await c, await j()), this.currentItem = i, i.target)
            this.to = i.target, this.highlight = i.highlight, await this.init();
          else if (s && s.target) {
            const p = s.index > i.index, u = this.getCloserItemObjective(i, p);
            u ? (this.to = u.target, this.highlight = u.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(J);
    e && e.append(this.$el);
  },
  beforeUnmount() {
    this.dispose(), this.$el.remove();
  },
  methods: {
    getBoundingClientRect(e) {
      if (e) {
        const { bottom: t, height: i, left: o, right: s, top: n, width: a, x: c, y: p } = e.getBoundingClientRect(), u = { bottom: t, height: i, left: o, right: s, top: n, width: a, x: c, y: p }, x = X.breakpoint.width - 5;
        u.width = c + a <= x ? a : a - (c + a - x);
        const y = {};
        return F(u, (b, O) => {
          y[O] = `${b}px`;
        }), { bounds: u, style: y };
      }
    },
    _getTarget(e) {
      return e && (U(e) ? e = e.startsWith(".") ? document.querySelector(e) : N(e) : V(e) ? e = e(this) : M(e) && (e = e.name ? N(e.name) : e.element)), e;
    },
    async getTarget(e) {
      let t = this._getTarget(e);
      return t || (await j(), t = this._getTarget(e)), t || (await A(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(() => {
            !q(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 (T(i) && await i, t) {
        this.updateTippyPlacement(t), this.setTargetResizeObserver(t);
        const o = await this.getTarget(this.highlight);
        if (o) {
          const { style: s } = this.getBoundingClientRect(o);
          this.highlightStyle = s;
        } 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 (L && !t && console.log(`DIDACTICIEL TARGET : ${this.to} NOT FOUND`), t) {
          this.addTippy(t), this.removeHighlight && this.removeHighlight();
          const i = Q(t);
          this.removeHighlight = i, setTimeout(i, 1050);
        } else
          this.next();
      }
    },
    async createDidacticielInstance(e, t) {
    },
    async start() {
      var o;
      const e = (o = H.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 = [
            W($.VIEWPORT_SIZE_CHANGED, this.debounceUpdate)
          ]) : h().setDidacticiel(null);
        } catch (s) {
          console.error(s), 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, o = t.steps.length - 1;
        this.step && await this.step.onLeave(this), this.stepIndex = -1, this.objectiveIndex = -1, k.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(), k.hideOnClick = !0;
        }
      }, 500);
    },
    clickHandler(e) {
      if (e.isClick) {
        const { targetHtmlElement: t } = this;
        this.addPointerEventOnTarget(t), k.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(ee(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(), A(de);
    },
    addTippy(e) {
      const t = te(e), { tippyInstances: i, objectiveIndex: o, stepIndex: s } = this;
      if (t && t.setCustomOptions && !i.some((n) => n.tippy === t) && !t.popper.classList.contains("ka-included-tippy")) {
        D(t.popper, "ka-excluded-tippy");
        const n = t.addListener("update", () => this.updateTippyPlacement(e)), a = t.setCustomOptions({ hideOnClick: !1 });
        let c;
        c = {
          tippy: t,
          stepIndex: s,
          objectiveIndex: o,
          dispose: () => {
            n(), z(t.popper, "ka-excluded-tippy"), a(!0), ie(i, c);
          }
        }, i.push(c);
      }
    },
    disposeTippy(e = null) {
      const { tippyInstances: t } = this;
      [...t].forEach((o) => {
        o && (!e || e === 1 || o.objectiveIndex === e) && o.dispose();
      });
    },
    addOverlay() {
      D(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 = R, this.highlightStyle = null, this.targetBounds = null, this.disposeTippy(), this.removeOverlay(), this.listeners.forEach((e) => e && e()), this.listeners = [];
    }
  }
}, ue = { key: 0 }, ve = { key: 0 }, ge = { class: "step-content" }, me = { class: "speed-speech-container" }, be = { class: "mr-2" }, fe = { class: "step-buttons" }, xe = { class: "flex flex-col mx-3 text-white text-shadow" }, ye = {
  key: 0,
  class: "text-size-2.5"
};
function ke(e, t, i, o, s, n) {
  const a = f("MouseLeftClickIcon"), c = f("tippy"), p = f("KapixIcon"), u = f("KapixDropDown"), x = f("ka-progress-bar"), y = f("KaSpeech");
  return s.tooltipContainerContext.container ? (l(), v("div", ue, [
    n.isActive ? (l(), v("div", ve, [
      r("div", {
        class: I(["step-container", { clickable: n.clickable, "no-shadow": s.highlightStyle }]),
        style: B(s.targetStyle)
      }, [
        s.currentItem && s.currentItem.isClick ? (l(), S(c, {
          key: `step-actions-${s.stepIndex}`,
          visible: n.isActive,
          "hide-on-click": !1,
          "flip-on-update": !0,
          sticky: !0,
          "z-index": s.zIndex,
          distance: 10,
          placement: "right",
          "max-width": "100%",
          animation: "shift-toward",
          theme: "no",
          trigger: "manual",
          interactive: "",
          multiple: ""
        }, {
          default: _(() => [
            g(a, {
              height: 35,
              width: 35
            })
          ]),
          _: 1
        }, 8, ["visible", "z-index"])) : m("", !0),
        (l(), S(c, {
          key: `step-${s.stepIndex}`,
          visible: n.isActive,
          "hide-on-click": !1,
          "flip-on-update": !0,
          animation: !1,
          sticky: !0,
          "z-index": s.zIndex,
          distance: 50,
          placement: n.contentPlacement,
          "class-name": "ka-included-tippy speech",
          "max-width": "100%",
          theme: "no",
          trigger: "manual",
          interactive: "",
          multiple: ""
        }, {
          default: _(() => [
            s.stepIndex >= 0 ? (l(), v(w, { key: 0 }, [
              r("div", ge, [
                g(c, {
                  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: _(() => [
                    g(p, {
                      "data-cy": "kapix-didacticiel-options",
                      value: "i-fa-solid:cog"
                    })
                  ]),
                  default: _(({ close: b }) => [
                    r("div", null, [
                      r("div", me, [
                        g(p, { value: "i-fa-solid:play-circle mr-2" }),
                        r("span", be, d(e.$t("didacticiels.speechSpeed.label", "Play speed")), 1),
                        g(u, {
                          modelValue: n.computedSpeechSpeed,
                          "onUpdate:modelValue": t[0] || (t[0] = (O) => n.computedSpeechSpeed = O),
                          "data-cy-input": "kapix-didacticiel-speech-speed",
                          class: "speed-selection",
                          "class-name": "ka-included-tippy speech",
                          "item-text": "label",
                          "item-value": "value",
                          items: n.speechSpeedList,
                          onClosed: b
                        }, null, 8, ["modelValue", "items", "onClosed"])
                      ])
                    ])
                  ]),
                  _: 1
                }),
                s.resourcesLoading ? (l(), S(x, {
                  key: 0,
                  class: "ml-1",
                  color: "green",
                  height: "4px",
                  indeterminate: ""
                })) : m("", !0),
                g(y, {
                  "show-avatar": n.step.showAvatar,
                  avatar: {
                    ...(n.scenario || {}).avatar,
                    ...(n.step || {}).avatar,
                    ...(n.objective || {}).avatar
                  },
                  content: s.currentItem && s.currentItem.content,
                  delay: s.animationDelay,
                  onCompleted: n.onSpeechCompleted
                }, null, 8, ["show-avatar", "avatar", "content", "delay", "onCompleted"])
              ]),
              r("div", fe, [
                r("button", {
                  class: "step-button done-button bg-red-500",
                  role: "button",
                  tabindex: "0",
                  small: "",
                  onClick: t[1] || (t[1] = C((b) => n.stopWithConfirm(), ["stop"]))
                }, d(e.$t("didacticiels.buttons.leave", "Leave")), 1),
                r("button", {
                  class: I(["step-button prev-button", { disabled: !n.canPrevious }]),
                  role: "button",
                  tabindex: "-1",
                  small: "",
                  onClick: t[2] || (t[2] = C((b) => n.previous(), ["stop"]))
                }, " ← " + d(e.$t("didacticiels.buttons.previous", "Previous")), 3),
                r("div", xe, [
                  r("span", null, d(s.stepIndex + 1) + " / " + d(n.steps.length), 1),
                  s.objectiveIndex >= 0 && n.objectives && n.objectives.length ? (l(), v("span", ye, d(s.objectiveIndex + 1) + " / " + d(n.objectives.length), 1)) : m("", !0)
                ]),
                r("button", {
                  class: I(["step-button next-button", [n.showContinue && "highlight perpetual-animation beat", !n.canNext && "disabled"]]),
                  role: "button",
                  small: "",
                  onClick: t[3] || (t[3] = C((b) => n.next(), ["stop"]))
                }, [
                  n.showContinue ? (l(), v(w, { key: 0 }, [
                    P(d(e.$t("didacticiels.buttons.continue", "Continue")) + " → ", 1)
                  ], 64)) : (l(), v(w, { key: 1 }, [
                    P(d(e.$t("didacticiels.buttons.skip", "Skip")) + " ", 1),
                    g(p, {
                      class: "mx-2",
                      value: "i-fa-solid:ban"
                    })
                  ], 64))
                ], 2),
                s.DEBUG ? (l(), v("button", {
                  key: 0,
                  class: I([{ disabled: s.stepIndex === n.steps.length - 1 }, "step-button next-button"]),
                  role: "button",
                  small: "",
                  onClick: t[4] || (t[4] = C((b) => n.skipAll(), ["stop"]))
                }, [
                  P(d(e.$t("didacticiels.buttons.skipAll", "Skip all")) + " ", 1),
                  g(p, {
                    class: "mx-2",
                    value: "i-fa-solid:ban"
                  })
                ], 2)) : m("", !0)
              ])
            ], 64)) : m("", !0)
          ]),
          _: 1
        }, 8, ["visible", "z-index", "placement"]))
      ], 6),
      s.highlightStyle ? (l(), v("div", {
        key: 0,
        class: "step-container highlight",
        style: B(s.highlightStyle)
      }, null, 4)) : m("", !0)
    ])) : m("", !0)
  ])) : m("", !0);
}
const Pe = /* @__PURE__ */ E(pe, [["render", ke], ["__scopeId", "data-v-8eb34d25"]]);
export {
  Pe as default
};
