import { NotificationClass } from './../notification-class';
import { Component, Input, OnInit, ViewChild, ElementRef } from '@angular/core';

/**
 * Class which represents a notification in the notifications list.
 */
@Component({
	selector: 'app-notification-element',
	templateUrl: 'notification-element.component.html',
	styles: [`
		#notification {
			transition: all 0.7s ease-out;
			position: relative;
		}
		.close {
			position: absolute;
			right: 7px;
			top: 12px;
			font-size: 19px;
			opacity: 0;
		}
		#notification:hover .close {
			opacity: 0.5;
		}
	`]
})
export class NotificationElement implements OnInit {
	/**
	 * The notification model.
	 */
	@Input() model: NotificationModel;
	/**
	 * The notification DOM element.
	 */
	@ViewChild('notification', {static: true}) notification: ElementRef;

	/**
	 * Sets the DOM element in the model object and plays with opacity.
	 */
	ngOnInit(): void {
		this.model.notification = this.notification;

		this.notification.nativeElement.style.opacity = 0;
		setTimeout(() => {
			this.notification.nativeElement.style.opacity = 1;
		}, 100);
	}
}

/**
 * Class which represents the notification model.
 */
export class NotificationModel {
	/**
	 * Element which represents the DOM element of the notification element.
	 */
	notification: ElementRef;

	/**
	 * Default constructor.
	 * @param {string} content The message of the notification.
	 * @param {NotificationClass} notificationClass The category of the notification (info, error...).
	 */
	constructor(
		public content: string,
		public notificationClass: NotificationClass
	) {}

	/**
	 * Hides the notification DOM element.
	 */
	public hide(): void {
		this.notification.nativeElement.style.opacity = 0;
		setTimeout(() => {
			this.notification.nativeElement.style.display = 'none';
		}, 800);
	}
}
