<style type="text/css" scoped>
	
	.popup-body {
		position: fixed;
		bottom: 15px;
		left: 15px;
		min-height: 50px;
		min-width: 200px;
		max-width: calc(100% - 20px);
		z-index: 1002;

		border-top: 2px solid #21ba45;
		box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
		border-top-right-radius: 4px;
		border-top-left-radius: 4px;
	}
	.popup-row {
		padding: 1em 5px;
		cursor: pointer;
		white-space: nowrap;
	}
	.popup-row > span {
		width: calc(100% - 50px);
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
		padding: 0 10px 0;
		font-size: 1.25em;
	}
	.popup-row + .popup-row {
		border-top: 1px solid #FFF;
	}

	.slide-in-bottom {
		animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	@keyframes slide-in-bottom {
		0% {
			transform: translateY(1000px);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.color-fade {
		animation: color-fade-animation 0.7s ease-out both;
	}
	@keyframes color-fade-animation {
		0% {
			color: black;
			background-color: black;
		}
		50% {
			color: black;
			background-color: black;
		}
		100% {
			color: white;
			background-color: #21ba45;
		}
	}



</style>

<template>
	<div class="popup-body slide-in-bottom" v-on:click="dismiss" v-if="notifications.length > 0">
		<div class="popup-row color-fade" v-for="item in notifications">
			<i class="disabled angle left icon"></i>
			<span>{{ item }}</span>
			<i class="disabled angle right icon"></i>
		</div>
	</div>
</template>

<script>

	import axios from 'axios'

	export default {
		name: 'GlobalNotificationComponent',
		data () {
			return {
				notifications: [],
				totalTimeout: null,
			}
		},
		beforeMount(){
			this.$bus.$on('notification', info => {
				this.displayNotification(info)
			})
		},
		mounted(){
			
			// this.$bus.$emit('notification', 'Password Protection Removed')
			// this.$bus.$emit('notification', 'Password Protection Removed')
			// this.$bus.$emit('notification', 'Password Protection Removed')			

		},
		methods: {
			displayNotification(newNotification){
				this.notifications.push(newNotification)
				clearTimeout(this.totalTimeout)
				this.totalTimeout = setTimeout(() => {
					this.dismiss()
				}, 4000)
			},
			dismiss(){
				this.notifications = []
			}
		}
	}
</script>
