<template>
  <transition :name="transition">
    <span
      :class="{
        [`mm-tag__${type}`]: type,
        [`mm-tag__${size}`]: size,
        'mm-tag--hit': hit,
        'mm-tag__radius': radius,
      }"
      :style="{
        backgroundColor,
        color,
        borderColor: bordered ? color : backgroundColor,
      }"
      class="mm-tag">
      <slot></slot>
      <ui-icon
        v-if="closable"
        class="mm-tag-close"
        name="close"
        size="12px"
        @click.stop="handleClose">
      </ui-icon>
    </span>
  </transition>
</template>
<script>
import Icon from "../icon"
import config from "../../managers/config"

config.defaults({
  "Tag.type": undefined,
  "Tag.size": undefined,
  "Tag.transition": "fade-in",
  "Tag.radius": false,
  "Tag.bordered": true,
})

export default {
  name: "mm-tag",
  components: {
    "ui-icon": Icon,
  },
  props: {
    closable: Boolean,
    type: {
      type: String,
      default: () => config.get("Tag.type"),
      validator(value) {
        return ["success", "info", "warning", "danger", "system", ""].includes(value)
      },
    },
    hit: Boolean,
    color: String,
    backgroundColor: String,
    size: {
      type: String,
      default: () => config.get("Tag.size"),
      validator(value) {
        return ["medium", "small", "mini", ""].includes(value)
      },
    },
    transition: {
      type: String,
      default: () => config.get("Tag.transition"),
    },
    radius: {
      type: Boolean,
      default: () => config.get("Tag.radius"),
    },
    bordered: {
      type: Boolean,
      default: () => config.get("Tag.bordered"),
    },
  },
  methods: {
    handleClose(event) {
      this.$emit("close", event)
    },
  },
}
</script>
