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

<script>
const TYPE_CLASSES_MAP = {
  'info': 'xb_icon_service_center',
  'success': 'xb_icon_right1',
  'warning': 'xb_icon_warn',
  'error': 'xb_icon_error'
};

const SMALL_TYPE_CLASSES_MAP = {
  'info': 'xb_icon_remind_ordinary',
  'success': 'xb_icon_correct_facet',
  'warning': 'xb_icon_remind_caution',
  'error': 'xb_icon_close_facet'
};

export default {
  name: 'XbAlert',

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

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

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

    smallIconClass() {
      return SMALL_TYPE_CLASSES_MAP[this.type] || 'xb_icon_remind_ordinary';
    },

    iconClass() {
      return TYPE_CLASSES_MAP[this.type] || 'xb_icon_service_center';
    },

    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>

<style>
</style>