<template>
  <transition name="el-alert-fade">
    <div
      class="el-alert"
      :class="[typeClass, center ? 'is-center' : '']"
      v-show="visible"
      role="alert"
    >
      <fa-icon
        v-if="showIcon"
        :icon="icon"
        class="el-alert__icon">
      </fa-icon>
      <div class="el-alert__content">
        <span class="el-alert__title" :class="[ boldTitle ]" v-if="title">{{ title }}</span>
        <slot>
          <p class="el-alert__description" v-if="description">{{ description }}</p>
        </slot>
      </div>
      <div>
        <span
          class="el-alert__closebtn"
          v-show="closable"
          @click="close()">
          <fa-icon
            :icon="['fas', 'times']">
          </fa-icon>
        </span>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  const TYPE_CLASSES_MAP = {
    'success': ['fas', 'check-circle'],
    'warning': ['fas', 'exclamation-circle'],
    'error': ['fas', 'times-circle'],
    'info': ['fas', 'info-circle']
  };
  export default {
    name: 'ElAlert',

    props: {
      title: {
        type: String,
        default: '',
        required: true
      },
      description: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'info'
      },
      closable: {
        type: Boolean,
        default: false
      },
      closeText: {
        type: String,
        default: ''
      },
      showIcon: {
        type: Boolean,
        default: true
      }
    },

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

    methods: {
      close() {
        this.visible = false;
        this.$emit('close');
      }
    },

    computed: {
      typeClass() {
        return `el-alert--${ this.type }`;
      },

      icon() {
        return TYPE_CLASSES_MAP[this.type];
      },

      boldTitle() {
        return this.description || this.$slots.default ? 'el-alert__title--bold' : '';
      }
    }
  };
</script>
