<template>
  <div
    :class="{
      'mm-badge': true,
      'mm-badge__standalone': !$slots.default,
    }">
    <slot></slot>
    <sup
      :class="{
        'mm-badge-content': true,
        'mm-badge-content__dot': dot,
        [`mm-badge-content--${status}`]: true,
        'mm-badge-content__zero': text === 0 && !showZero,
      }">
      <span v-if="!dot">
        {{ text }}
      </span>
    </sup>
  </div>
</template>

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

config.defaults({
  "Badge.showZero": false,
  "Badge.dot": false,
  "Badge.status": "error",
})

export default {
  name: "mm-badge",
  props: {
    value: [String, Number],
    max: Number,
    showZero: {
      type: Boolean,
      default: () => config.get("Badge.showZero"),
    },
    dot: {
      type: Boolean,
      default: () => config.get("Badge.dot"),
    },
    status: {
      type: String,
      default: () => config.get("Badge.status"),
      validator(val) {
        return ["success", "processing", "default", "error", "warning"].includes(val)
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    text() {
      const { value, max } = this

      return typeof value === "number" && typeof max === "number"
        ? value > max
          ? `${max}+`
          : value
        : value
    },
  },
}
</script>
