import anime from 'animejs/lib/anime.es.js';
const notifcation = document.querySelector('[role="notify-message"]');
const notify = document.getElementById('notify-message');
const responseText = document.querySelector('[role="response-text"]');
const notifyText = document.querySelector('[role="notify-text"]');
const notifyIcons = document.querySelector('[role="notify-icons"]');
//const notifyProgress = document.getElementById('notify-progress');
const iconGood = document.querySelector('[role="notify-good"]');
const iconNotGood = document.querySelector('[role="notify-notgood"]');
const iconWorking = document.querySelector('[role="notify-working"]');

export default class Notfications {
	//--------------------------
	// constructor
	//--------------------------
	constructor() {}
	//--------------------------
	// methods
	//--------------------------

	alert(text, status) {
		iconWorking.style.display = 'none';
		iconGood.style.display = 'none';
		iconNotGood.style.display = 'none';

		var color = '';
		responseText.innerHTML = text;
		if (status !== null) {
			if (status) {
				color = '#32cd32';
				iconWorking.style.display = 'none';
				iconGood.style.display = 'block';
			} else {
				color = '#F64747';
				iconWorking.style.display = 'none';
				iconNotGood.style.display = 'block';
			}
		} else {
			color = '#200317';
			iconWorking.style.display = 'block';
		}

		new anime({
			targets: document.querySelector('[role="top-nav"]'),
			rotateX: '180deg',
			easing: 'easeOutQuint'
		});

		new anime({
			targets: document.querySelector('[role="notify"]'),
			rotateX: '10deg',
			easing: 'easeOutQuint',
			complete: () => {
				new anime({
					targets: notifyIcons,
					width: 39,
					opacity: 1,
					easing: 'easeInQuint',
					duration: 300
				});

				new anime({
					targets: notifyText,
					backgroundColor: color,
					opacity: 1,
					easing: 'easeInOutQuad',
					duration: 400,
					complete: () => {
						setTimeout(() => {
							if (status !== null) {
								anime({
									targets: notifyText,
									backgroundColor: color,
									opacity: 0,
									easing: 'easeInOutQuad',
									duration: 400
								});

								anime({
									targets: notifyIcons,
									width: 0,
									opacity: 0,
									easing: 'easeOutQuint',
									duration: 350
								});

								new anime({
									targets: document.querySelector('[role="top-nav"]'),
									rotateX: '0deg',
									easing: 'easeOutQuint'
								});

								new anime({
									targets: document.querySelector('[role="notify"]'),
									rotateX: '180deg',
									easing: 'easeOutQuint'
								});
							}
						}, 2500);
					}
				});
			}
		});
	}

	//--------------------------
	// event handlers
	//--------------------------
}
