import { defineComponent as x, ref as c, openBlock as l, createElementBlock as d, createElementVNode as r, normalizeClass as s, unref as o, normalizeStyle as B, createVNode as u, withCtx as m, Fragment as R, renderList as V, createBlock as N, resolveDynamicComponent as z, toDisplayString as f, createCommentVNode as E, renderSlot as P } from "vue";
import { useCommon as v } from "../../composables/useCommon.js";
import { useColors as $ } from "../../composables/useColors.js";
import { useTheme as D } from "../../composables/useTheme.js";
import X from "../scroll/Scroll.vue.js";
import A from "../icon/Icon.vue.js";
import { stepperIncompleteIcon as F, errorIcon as L, successIcon as T, stepperPristineIcon as W } from "../../common/icons.js";
const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" }, G = { class: "grid text-left" }, H = { class: "text-sm truncate" }, J = {
  key: 0,
  class: "text-xs text-secondary-500"
}, K = {
  ...v.validators(),
  variant: ["line"]
}, M = {
  ...v.props(),
  ...$.props("primary"),
  modelValue: [String, Number],
  steps: {
    type: Array,
    default: () => []
  },
  variant: {
    type: String,
    default: "line"
  },
  grow: Boolean,
  fullWidth: {
    type: Boolean,
    default: !0
  },
  interactive: {
    type: Boolean,
    default: !0
  },
  iconPristine: String,
  iconComplete: String,
  iconIncomplete: String,
  iconCurrent: String,
  iconError: String
}, O = {
  name: "XStepper",
  validators: K
}, se = /* @__PURE__ */ x({
  ...O,
  props: M,
  emits: ["update:modelValue"],
  setup(y, { emit: _ }) {
    const n = y, b = _, g = c(null), S = c(null), h = c(null);
    function k(e, a) {
      e.disabled || !n.interactive || b("update:modelValue", a);
    }
    function C(e, a) {
      return e.status === "incomplete" ? n.iconIncomplete || F : e.status === "error" ? n.iconError || L : e.status === "complete" ? n.iconComplete || T : n.iconPristine || W;
    }
    const { styles: w, classes: i, className: I } = D("Stepper", {}, n);
    return (e, a) => (l(), d("div", null, [
      r("div", {
        ref_key: "wrapperRef",
        ref: S,
        class: s(["relative", [
          o(I),
          o(i).wrapper
        ]]),
        style: B(o(w))
      }, [
        u(X, {
          ref_key: "scrollRef",
          ref: g,
          scrollbar: !1,
          horizontal: "",
          mousewheel: "",
          class: s(o(i).scroller)
        }, {
          default: m(() => [
            r("div", {
              ref_key: "stepperRef",
              ref: h,
              class: s(["relative", o(i).list])
            }, [
              (l(!0), d(R, null, V(e.steps, (t, p) => (l(), N(z(e.interactive ? "button" : "div"), {
                key: p,
                type: e.interactive ? "button" : void 0,
                class: s([o(i).step, {
                  "cursor-pointer": e.interactive && !t.disabled,
                  "text-secondary-400 dark:text-secondary-600": t.disabled,
                  "flex-1": e.grow
                }]),
                disabled: t.disabled || !e.interactive,
                onClick: (Q) => k(t, p)
              }, {
                default: m(() => [
                  r("div", j, [
                    r("div", {
                      class: s(["h-0.5 w-full mb-2", [t.status === "complete" || t.status === "incomplete" ? "bg-primary-500" : "bg-secondary-200 dark:bg-secondary-700"]])
                    }, null, 2),
                    r("div", q, [
                      u(A, {
                        icon: C(t),
                        size: "sm",
                        class: s([o(i).icon, {
                          "text-primary-500": t.status === "complete" || t.status === "incomplete",
                          "text-error-500": t.status === "error"
                        }])
                      }, null, 8, ["icon", "class"]),
                      r("div", G, [
                        r("div", H, f(t.label), 1),
                        t.description ? (l(), d("div", J, f(t.description), 1)) : E("", !0)
                      ])
                    ])
                  ])
                ]),
                _: 2
              }, 1032, ["type", "class", "disabled", "onClick"]))), 128))
            ], 2)
          ]),
          _: 1
        }, 8, ["class"])
      ], 6),
      r("div", {
        class: s(o(i).content)
      }, [
        P(e.$slots, "default")
      ], 2)
    ]));
  }
});
export {
  se as default
};
