<template>
  <transition name="ibps-alert-fade">
    <div
      v-show="visible"
      class="ibps-alert"
      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
      role="alert"
    >
      <i v-if="showIcon" class="ibps-alert__icon" :class="[ iconClass, isBigIcon ]" />
      <div class="ibps-alert__content">
        <span v-if="title || $slots.title" class="ibps-alert__title" :class="[ isBoldTitle ]">
          <slot name="title">{{ title }}</slot>
        </span>
        <p v-if="$slots.default && !description" class="ibps-alert__description"><slot /></p>
        <p v-if="description && !$slots.default" class="ibps-alert__description">{{ description }}</p>
        <i v-show="closable" class="ibps-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'ibps-icon ibps-icon-close': closeText === '' }" @click="close()">{{ closeText }}</i>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
const TYPE_CLASSES_MAP = {
  'success': 'ibps-icon ibps-icon-success',
  'warning': 'ibps-icon ibps-icon-warning',
  'error': 'ibps-icon ibps-icon-error'
}
export default {
  name: 'ibps-alert',

  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info'
    },
    closable: {
      type: Boolean,
      default: true
    },
    closeText: {
      type: String,
      default: ''
    },
    showIcon: Boolean,
    center: Boolean,
    effect: {
      type: String,
      default: 'light',
      validator: function(value) {
        return ['light', 'dark'].indexOf(value) !== -1
      }
    }
  },

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

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

    iconClass() {
      return TYPE_CLASSES_MAP[this.type] || 'ibps-icon ibps-icon-info'
    },

    isBigIcon() {
      return this.description || this.$slots.default ? 'is-big' : ''
    },

    isBoldTitle() {
      return this.description || this.$slots.default ? 'is-bold' : ''
    }
  },

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