<template>
  <transition name="mm-alert-fade">
    <div
      v-show="visible"
      :class="{
        [`mm-alert__${type}`]: type,
        'mm-alert--big': $slots.description || description || $slots.default,
        'mm-alert--center': center,
        'mm-alert--global': global,
      }"
      class="mm-alert"
      role="alert">
      <ui-icon
        v-if="showIcon"
        :name="type"
        class="mm-alert-icon">
      </ui-icon>
      <div class="mm-alert-content">
        <span
          v-if="$slots.title || title"
          class="mm-alert-title">
          <slot name="title">
            {{ title }}
          </slot>
        </span>
        <slot>
          <p
            v-if="$slots.description || description"
            class="mm-alert-description">
            <slot name="description">
              {{ description }}
            </slot>
          </p>
        </slot>

        <template v-if="closable">
          <span
            v-if="closeText"
            class="mm-alert-close mm-alert-close-text"
            @click="close">
            {{ closeText }}
          </span>
          <ui-icon
            v-else
            class="mm-alert-close mm-alert-close-icon"
            name="close"
            size="8px"
            @click="close">
          </ui-icon>
        </template>
      </div>
    </div>
  </transition>
</template>

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

config.defaults({
  "Alert.type": "info",
  "Alert.closable": true,
  "Alert.showIcon": false,
  "Alert.center": false,
})

export default {
  name: "mm-alert",

  components: {
    "ui-icon": Icon,
  },

  props: {
    global: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: () => config.get("Alert.type"),
      validator(value) {
        return ["success", "warning", "error", "info"].includes(value)
      },
    },
    closable: {
      type: Boolean,
      default: () => config.get("Alert.closable"),
    },
    closeText: {
      type: String,
      default: "",
    },
    showIcon: {
      type: Boolean,
      default: () => config.get("Alert.showIcon"),
    },
    center: {
      type: Boolean,
      default: () => config.get("Alert.center"),
    },
  },

  data() {
    return {
      visible: true,
    }
  },

  methods: {
    close() {
      this.visible = false
      this.$emit("close")
    },
  },
}
</script>
