<template>
  <div
    v-if="isActive"
    ref="alert"
    :class="[
    `${$classPrefix}-alert`,
    `${hasColor ? color : null}`,
    `${$classPrefix}-alert--${type}`,
    {
      'expanded': !!$slots['title']
    }
  ]"
  >
    <!-- Icon -->
    <div v-if="icon" :class="`${$classPrefix}-alert__icon`">
      <irbis-icon :name="icon" />
    </div>
    <div :class="`${$classPrefix}-alert__content`">
      <span v-if="this.$slots['title']" :class="`${$classPrefix}-alert__title`">
        <slot name="title"></slot>
      </span>
      <span :class="`${$classPrefix}-alert__body`">
        <slot></slot>
      </span>
    </div>
    <irbis-button v-if="closeable" subtle :class="`${$classPrefix}-alert__close`" @click="close">
      <span v-if="closeLabel" :class="`${$classPrefix}-alert__close-label`">{{ closeLabel }}</span>
      <irbis-icon v-else name="x" />
    </irbis-button>
  </div>
</template>

<script>
import _color from "../../utils/color";

export default {
  name: "IrbisAlert",

  props: {
    active: {
      default: true,
      type: Boolean
    },
    type: {
      default: "basic",
      type: String
    },
    color: {
      default: "info",
      type: String
    },
    closeable: {
      default: false,
      type: Boolean
    },
    closeLabel: {
      default: null,
      type: String
    },
    icon: String
  },

  data() {
    return {
      isActive: this.active
    };
  },

  computed: {
    hasColor() {
      return _color.hasColor(this.color);
    }
  },

  watch: {
    active() {
      if (this.active && !this.isActive) this.show();
      else if (!this.active && this.isActive) this.hide();
    }
  },

  methods: {
    show() {
      this.isActive = true;
    },
    hide() {
      this.isActive = false;
    },
    close() {
      this.$emit("close");
      this.hide();
    }
  }
};
</script>