"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const aria = require("../../../constants/aria.js");
const event = require("../../../utils/dom/event.js");
const icon = require("../../../utils/vue/icon.js");
const index = require("../../../hooks/use-locale/index.js");
const index$1 = require("../../icon/index.js");
const index$2 = require("../../button/index.js");
const helper = require("./helper.js");
const step = require("./step.js");
const Vue = require("vue");
const omit = require("../../../../../lodash-es/omit.js");
const _hoisted_1 = ["aria-label"];
var step_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElTourStep",
  __name: "step",
  props: step.tourStepProps,
  emits: step.tourStepEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const { Close } = icon.CloseComponents;
    const { t } = index.useLocale();
    const { currentStep, current, total, showClose, closeIcon, mergedType, ns, slots: tourSlots, updateModelValue, onClose: tourOnClose, onFinish: tourOnFinish, onChange } = Vue.inject(helper.tourKey);
    Vue.watch(props, (val) => {
      currentStep.value = val;
    }, { immediate: true });
    const mergedShowClose = Vue.computed(() => props.showClose ?? showClose.value);
    const mergedCloseIcon = Vue.computed(() => props.closeIcon ?? closeIcon.value ?? Close);
    const filterButtonProps = (btnProps) => {
      if (!btnProps) return;
      return omit.default(btnProps, ["children", "onClick"]);
    };
    const onPrev = () => {
      var _a, _b;
      current.value -= 1;
      if ((_a = props.prevButtonProps) == null ? void 0 : _a.onClick) (_b = props.prevButtonProps) == null ? void 0 : _b.onClick();
      onChange();
    };
    const onNext = () => {
      var _a;
      if (current.value >= total.value - 1) onFinish();
      else current.value += 1;
      if ((_a = props.nextButtonProps) == null ? void 0 : _a.onClick) props.nextButtonProps.onClick();
      onChange();
    };
    const onFinish = () => {
      onClose();
      tourOnFinish();
    };
    const onClose = () => {
      updateModelValue(false);
      tourOnClose();
      emit("close");
    };
    const handleKeydown = (e) => {
      var _a;
      if ((_a = e.target) == null ? void 0 : _a.isContentEditable) return;
      switch (event.getEventCode(e)) {
        case aria.EVENT_CODE.left:
          e.preventDefault();
          current.value > 0 && onPrev();
          break;
        case aria.EVENT_CODE.right:
          e.preventDefault();
          onNext();
          break;
      }
    };
    Vue.onMounted(() => {
      window.addEventListener("keydown", handleKeydown);
    });
    Vue.onBeforeUnmount(() => {
      window.removeEventListener("keydown", handleKeydown);
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, [
        mergedShowClose.value ? (Vue.openBlock(), Vue.createElementBlock("button", {
          key: 0,
          "aria-label": Vue.unref(t)("el.tour.close"),
          class: Vue.normalizeClass(Vue.unref(ns).e("closebtn")),
          type: "button",
          onClick: onClose
        }, [Vue.createVNode(Vue.unref(index$1.ElIcon), { class: Vue.normalizeClass(Vue.unref(ns).e("close")) }, {
          default: Vue.withCtx(() => [(Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(mergedCloseIcon.value)))]),
          _: 1
        }, 8, ["class"])], 10, _hoisted_1)) : Vue.createCommentVNode("v-if", true),
        Vue.createElementVNode("header", { class: Vue.normalizeClass([Vue.unref(ns).e("header"), { "show-close": Vue.unref(showClose) }]) }, [Vue.renderSlot(_ctx.$slots, "header", {}, () => [Vue.createElementVNode("span", {
          role: "heading",
          class: Vue.normalizeClass(Vue.unref(ns).e("title"))
        }, Vue.toDisplayString(__props.title), 3)])], 2),
        Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("body")) }, [Vue.renderSlot(_ctx.$slots, "default", {}, () => [Vue.createElementVNode("span", null, Vue.toDisplayString(__props.description), 1)])], 2),
        Vue.createElementVNode("footer", { class: Vue.normalizeClass(Vue.unref(ns).e("footer")) }, [Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).b("indicators")) }, [Vue.unref(tourSlots).indicators ? (Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(Vue.unref(tourSlots).indicators), {
          key: 0,
          current: Vue.unref(current),
          total: Vue.unref(total)
        }, null, 8, ["current", "total"])) : (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, { key: 1 }, Vue.renderList(Vue.unref(total), (item, index2) => {
          return Vue.openBlock(), Vue.createElementBlock("span", {
            key: item,
            class: Vue.normalizeClass([Vue.unref(ns).b("indicator"), Vue.unref(ns).is("active", index2 === Vue.unref(current))])
          }, null, 2);
        }), 128))], 2), Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).b("buttons")) }, [Vue.unref(current) > 0 ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$2.ElButton), Vue.mergeProps({
          key: 0,
          size: "small",
          type: Vue.unref(mergedType)
        }, filterButtonProps(__props.prevButtonProps), { onClick: onPrev }), {
          default: Vue.withCtx(() => {
            var _a;
            return [Vue.createTextVNode(Vue.toDisplayString(((_a = __props.prevButtonProps) == null ? void 0 : _a.children) ?? Vue.unref(t)("el.tour.previous")), 1)];
          }),
          _: 1
        }, 16, ["type"])) : Vue.createCommentVNode("v-if", true), Vue.unref(current) <= Vue.unref(total) - 1 ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$2.ElButton), Vue.mergeProps({
          key: 1,
          size: "small",
          type: Vue.unref(mergedType) === "primary" ? "default" : "primary"
        }, filterButtonProps(__props.nextButtonProps), { onClick: onNext }), {
          default: Vue.withCtx(() => {
            var _a;
            return [Vue.createTextVNode(Vue.toDisplayString(((_a = __props.nextButtonProps) == null ? void 0 : _a.children) ?? (Vue.unref(current) === Vue.unref(total) - 1 ? Vue.unref(t)("el.tour.finish") : Vue.unref(t)("el.tour.next"))), 1)];
          }),
          _: 1
        }, 16, ["type"])) : Vue.createCommentVNode("v-if", true)], 2)], 2)
      ], 64);
    };
  }
});
exports.default = step_vue_vue_type_script_setup_true_lang_default;
