<template>
  <div class="itf-toast-message toast d-print-none" :class="{'show': visible, [typeClass]: true}" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header" v-if="title || $slots.title" :class="{[typeClass]: true}">
      <template v-if="iconImg || $slots.icon">
        <img v-if="iconImg" :src="iconImg" class="rounded me-2" />
        <slot v-else name="icon" />
      </template>
      <strong class="me-auto" @click="collapsed = !collapsed">
        <slot name="title">
          <span v-if="supportHtml" v-html="title"></span>
          <span v-else>{{ title }}</span>
        </slot>
      </strong>
<!--        <small>11 mins ago</small>-->
      <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" :aria-label="$t('components.close')" @click="close"></button>
    </div>
    <div class="d-flex" v-if="!collapsed">
      <div class="toast-body flex-shrink-1 w-100">
        <div v-if="supportHtml" v-html="content">
          <slot />
        </div>
        <slot v-else>{{ content }}</slot>
        <itf-button small primary block v-if="button" @click="onClick" class="mt-3">{{button}}</itf-button>
      </div>
      <div class="me-2 m-auto" v-if="!title && !$slots.title">
        <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" :aria-label="$t('components.close')" @click="close"></button>
      </div>
    </div>
  </div>
</template>
<script>
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import itfButton from '../button/Button';

export default @Component({
  name: 'itfToastMessage',
  components: {
    itfButton
  }
})
class itfToastMessage extends Vue {
  @Prop(String) type;
  @Prop(String) iconImg;
  @Prop(Boolean) closable;
  @Prop(String) title;
  @Prop(String) content;
  @Prop(String) button;
  @Prop(Function) onClick;

  @Prop(Boolean) supportHtml;
  @Prop({ type: Boolean, default: true }) isCollapsed;

  data () {
    return {
      visible: true,
      collapsed: this.isCollapsed
    };
  }

  get typeClass() {
    if (this.type === 'error') {
      return 'bg-danger text-white';
    }
    if (this.type) {
      return `bg-${this.type} text-white`;
    }
    return '';
  }

  triggerCollapse () {
    this.collapsed = !this.collapsed;
  }

  @Emit('close')
  close () {
    this.visible = false;
  }
}
</script>
