<template>
  <div
    class="l-steps"
    :class="['l-steps--' + direction, mini ? 'l-steps--mini' : '']"
    :style="{
      '--steps-layout': stepsLayout,
      '--steps-spacing': direction == 'vertical' ? 'var(--spacing-8)' : null,
      '--steps-bg': stepsBG,
    }"
  >
    <slot />
  </div>
</template>

<script>
export default {
  name: "l-steps",
  props: {
    /**
     * Direction of the steps layout
     */
    direction: {
      type: String,
      default: "horizontal",
      validator: function (value) {
        return ["horizontal", "vertical"].indexOf(value) !== -1;
      },
    },
    /**
     * The background color of the steps.
     */
    background: {
      type: String,
      default: "white",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the background color.
     */
    shade: {
      type: String,
      default: "50",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Simple version of the steps.
     */
    mini: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    stepsLayout() {
      switch (this.direction) {
        case "horizontal":
          return "row";
        case "vertical":
          return "column";
      }
      return "";
    },
    stepsBG() {
      if (this.background === "white" || this.background === "black") {
        return `var(--${this.background})`;
      }
      return `var(--${this.background}-${this.shade})`;
    },
  },
};
</script>
<style>
.l-steps {
  --steps-layout: row;
  --steps-spacing: var(--spacing-8);
  display: flex;
  justify-content: space-between;
  counter-reset: section;
  flex-direction: var(--steps-layout);
  gap: var(--steps-spacing);
  position: relative;
  background-color: var(--steps-bg);
}
.l-steps::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.l-steps .l-step-indicator:not(.l-step-indicator--complete) {
  background-color: var(--steps-bg);
}
.l-steps--horizontal {
  flex-direction: row;
}
.l-steps--horizontal::before {
  width: 100%;
  height: 1px;
  top: var(--spacing-4);
  border-top: 1px solid var(--neutral-300);
}
.l-steps--horizontal .l-step-heading {
  padding: 0 var(--spacing-4);
  background-color: var(--steps-bg);
}
.l-steps--horizontal .l-step-content {
  margin-left: var(--spacing-14);
}
.l-steps--horizontal .l-step:first-child .l-step-heading {
  padding-left: 0;
}
.l-steps--horizontal .l-step:last-child .l-step-heading {
  padding-right: 0;
  width: 100%;
}
.l-steps--vertical::before {
  width: 1px;
  height: 100%;
  left: var(--spacing-4);
  border-left: 1px solid var(--neutral-300);
}
.l-steps--vertical .l-step-heading {
  padding: var(--spacing-4) 0;
  background-color: var(--steps-bg);
}
.l-steps--vertical .l-step-title {
  font-size: var(--sizing-xl);
}
.l-steps--vertical .l-step:first-child .l-step-heading {
  padding-top: 0;
}
.l-steps--vertical .l-step:last-child {
  padding-bottom: 0;
  background-color: var(--steps-bg);
}
.l-steps--vertical .l-step:last-child .l-step-heading {
  padding-bottom: 0;
}

.l-steps.l-steps--mini {
  --steps-spacing: var(--spacing-2) !important;
}

/* Mini horizontal */
.l-steps--mini.l-steps--horizontal::before {
  top: var(--spacing-3);
}
.l-steps--mini.l-steps--horizontal .l-step-heading {
  padding: 0 var(--spacing-1);
}
.l-steps--mini.l-steps--horizontal .l-step-indicator {
  margin-right: var(--spacing-1);
  margin-left: var(--spacing-1);
}
.l-steps--mini.l-steps--horizontal .l-step:not(.l-step--active) .l-step-title {
  display: none;
}

/* Mini vertical */
.l-steps--mini.l-steps--vertical::before {
  left: var(--spacing-3);
}
.l-steps--mini.l-steps--vertical .l-step-heading {
  padding: var(--spacing-2) 0;
}
.l-steps--mini.l-steps--horizontal .l-step-indicator {
  margin-right: var(--spacing-1);
  margin-left: var(--spacing-1);
}

/* General content */
.l-steps--mini .l-step-content {
  margin-left: var(--spacing-9);
  font-size: var(--sizing-xs);
  padding: 0;
  border: 0;
}
.l-steps--mini .l-step:not(.l-step--active) .l-step-content {
  display: none;
}
.l-steps--mini .l-step-indicator {
  width: var(--spacing-6);
  height: var(--spacing-6);
}
.l-steps--mini .l-step-heading,
.l-steps--mini .l-step-title {
  font-size: var(--sizing-sm);
}
</style>
