<template>
	<transition name="wcc-slide-top">
		<div
			role="alert"
			:id="id"
			:class="notificationClass"
			aria-live="assertive"
			v-show="message"
		>
			<div class="wcc-notification-content">
				<p><span v-html="message"></span></p>
			</div>

			<div class="wcc-notification-close" v-show="options.dismiss.show">
				<button
					type="button"
					class="wcc-close"
					@click="close"
					aria-label="Close"
				>
					<span aria-hidden="true">×</span>
				</button>
			</div>
		</div>
	</transition>
</template>

<script>
import { delayExecution } from "@/helpers/utils";
export default {
	name: "Notification",

	data() {
		return {
			id: "wcc-toast-notification",
			message: "",
			type: "success",
			callback: false,
			options: {
				type: "success",
				autoclose: {
					show: true,
					timeout: 5000,
				},
				dismiss: {
					show: false,
				},
			},
		};
	},
	mounted() {
		this.$root.$on("triggerNotification", (data) => {
			// Setup notification options.
			this.setupNotice(data);
		});
	},

	computed: {
		notificationClass() {
			return {
				"wcc-notification": true,
				"wcc-notification-info": this.type === "info",
				"wcc-notification-error": this.type === "error",
				"wcc-notification-success": this.type === "success",
				"wcc-notification-warning": this.type === "warning",
			};
		},
	},

	methods: {
		getMessage(data) {
			return data.message || "";
		},

		async setupNotice(data) {
			// Notice type.
			this.type = data.type || "success";
			// Set type.
			this.options.type = this.type;

			// Is message dismissible.
			this.options.dismiss.show = data.dismiss || false;

			// If not dismissible, auto close.
			this.options.autoclose.show = !this.options.dismiss.show;

			// Set notification text.
			this.message = this.getMessage(data);
			if (this.options.autoclose.show) {
				await delayExecution(this.options.autoclose.timeout);
				this.message = false;
				if (typeof this.callback == "function") this.callback();
			}
		},
		close() {
			this.message = false;
		},
	},
};
</script>
<style lang="scss" scoped>
.wcc-slide-top-enter-active,
.wcc-slide-top-leave-active,
.wcc-slide-top-move {
	transition: all 0.5s;
}
.wcc-slide-top-enter,
.wcc-slide-top-leave-to {
	opacity: 0;
	transform: translateY(-500px);
}

.wcc-slide-leave-active,
.wcc-slide-enter-active {
	transition: 0.3s;
}
.wcc-slide-enter {
	transform: translate(0, 100%);
}
.wcc-slide-leave-to {
	transform: translate(-200%, 0);
}
.wcc-notification {

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 15px 20px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	position: relative;
	background-color: #E6F3E9;
	border-color: #46b450;
	position: fixed;
	z-index: 5000;
	top: 75px;
	min-width: 300px;
	right: 36px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	border: 1px solid #96CFA4;
	width: 337px;
	height: 58px;
	color: #006116;
	&::before {
		content: "";
		width: 20px;
		height: 20px;
		padding: 3px 25px 3px 3px;
		display: flex;
		background-image: url("~@/assets/success.svg");
		display: inline-block;
		background-repeat: no-repeat;
	}
	p {
		font-size: 13px;
		font-weight: 400;
		color: darken(color(mono, base), 10%);
	}
	&.wcc-notification-error {
		background-color: #fdf3f2;
		border-color: color(error, base);
		&::before {
			background-image: url("~@/assets/error.svg");
		}
	}
	&.wcc-notification-warning {
		background-color: #fdf3f2;
		border-color: color(warning, base);
		&::before {
			background-image: url("~@/assets/warning.svg");
		}
	}
	&.wcc-notification-info {
		background-color: #fdf3f2;
		border-color: color(info, base);
		&::before {
			background-image: url("~@/assets/warning.svg");
		}
	}
	.wcc-notification-close {
		display: flex;
		align-items: center;
		margin-left: 15px;
	}
	.wcc-close {
		font-size: 20px;
		padding: 0;
		background: transparent;
		border: none;
		display: inline-block;
		color: #7e7e7e;
		cursor: pointer;
		line-height: 0;
	}
}
</style>