<script>
import config from "../../managers/config"

config.defaults({
  "Steps.size": "default",
  "Steps.direction": "horizontal",
  "Steps.labelLayout": "horizontal",
  "Steps.pdot": false,
})

export default {
  name: "mm-steps",
  props: {
    size: {
      type: String,
      default: () => config.get("Steps.size"),
    },
    direction: {
      type: String,
      default: () => config.get("Steps.direction"),
    },
    labelLayout: {
      type: String,
      validator(val) {
        return ["horizontal", "vertical"].includes(val)
      },
      default: () => config.get("Steps.labelLayout"),
    },
    current: {
      type: Number,
      default: 0,
    },
    pdot: {
      type: Boolean,
      default: () => config.get("Steps.pdot"),
    },
    status: {
      type: String,
      default: "process",
    },
  },
  data() {
    return {
      currentIndex: this.current || 0,
    }
  },
  watch: {
    current(val) {
      this.currentIndex = val
    },
  },
  render(h) {
    let { size, direction, pdot, labelLayout } = this
    const step = this.$slots.default
    if (this.$slots.default) {
      this.$slots.default.forEach((item, index) => {
        item.componentOptions && (item.componentOptions.propsData.index = index)
      })
    }
    return (
      <div
        class={{
          "mm-steps": true,
          "mm-steps--horizontal": direction === "horizontal",
          "mm-steps--vertical": direction === "vertical",
          "mm-steps__small": size === "small",
          "mm-steps-label--horizontal": labelLayout === "horizontal",
          "mm-steps-label--vertical": pdot || labelLayout === "vertical",
          "mm-steps--dot": pdot,
        }}
      >
        {step}
      </div>
    )
  },
}
</script>
