<template>
<transition name="message-flash" mode="in-out">
    <div v-bind:class="'message ' + type" v-if="show">
        <div class="message-header">
            <div class="stateIcon"><Icon :icon="iconCode"/></div>
            <div class="header" v-html="header"></div>
            <div class="closeIcon"><Icon :icon="['fabt', 'times']" v-show="important" @click="show = false"/></div>
        </div>
        <div class="text" v-html="message"></div>
    </div>
</transition>
</template>

<script>
import { uniqueId } from 'lodash'
import { FontAwesomeIcon as Icon } from '@fortawesome/vue-fontawesome'
/**
* Global messaging component responsible to show the toast message. This is injected inside App component which provides necessary data to be rendered.
*/
export default {
	name: 'Message',
	props: {
		// Message category <i>info, warn, error</i>
		type: {
			type: String,
			default: 'info'
		},
		// Message string (HTML supported)
		message: {
			type: String,
			default: ''
		},
		// Flag that defines if the message needs to be sticky
		important: {
			type: Boolean,
			default: false
		},
		// Custom title to the message
		title: {
			type: String,
			default: ''
		}
	},
	components: {
		Icon
	},
	data() {
		return { show: true }
	},
	computed: {
		iconCode() {
			if (this.type == 'info') {
				return ['fabt', 'circle-info']
			} else if (this.type == 'error') {
				return ['fabt', 'alert']
			} else if (this.type == 'warn') {
				return ['fabt', 'circle-exclamation']
			} else {
				return ['fabt', 'circle-info']
			}
		},
		header() {
			let t = ''
			if (this.title.length > 0) {
				t = this.title
			} else {
				switch (this.type.toLowerCase()) {
					case 'info':
						t = this.$t('btgsvue.info')
						break
					case 'error':
						t = this.$t('btgsvue.error')
						break
					case 'warn':
						t = this.$t('btgsvue.warn')
						break
					case 'success':
						t = this.$t('btgsvue.success')
						break
					default:
						t = this.$t('btgsvue.info')
				}
			}
			return t
		}
	},
	mounted() {
		if (!this.important) {
			setTimeout(() => { this.show = false }, 8000)
		}
	}
}
</script>
