<template>
  <div
    :class="timelineClass"
    class="mm-timeline">
    <slot></slot>
    <div class="mm-timeline-item mm-timeline-item--pending">
      <div class="mm-timeline-item-tail--pending"></div>
      <div class="mm-timeline-item-dot-wrapper">
        <slot
          name="pendingDot">
          <div class="mm-timeline-item-dot--pending"></div>
        </slot>
      </div>
      <div class="mm-timeline-item-content">
        <slot name="pendingContent">
          {{ pendingContent }}
        </slot>
      </div>
    </div>
  </div>
</template>

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

config.defaults({
  "Timeline.reverse": false,
  "Timeline.pending": false,
})

export default {
  name: "mm-timeline",
  props: {
    reverse: {
      type: Boolean,
      default: () => config.get("Timeline.reverse"),
    },
    pending: {
      type: [Boolean, String],
      default: () => config.get("Timeline.pending"),
    },
  },
  computed: {
    timelineClass() {
      return {
        "mm-timeline--reverse": this.reverse,
        "mm-timeline--pending": this.pending,
      }
    },
    pendingContent() {
      return typeof this.pending === "string" ? this.pending : ""
    },
  },
}
</script>
