import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { ToastService } from './toast.service';
import { Subscription } from 'rxjs';

@Component({
	selector: 'esp-toast',
	templateUrl: './toast.component.html',
	styleUrls: ['./toast.component.scss'],
})
export class ToastComponent implements OnInit, OnDestroy {
	@Input() toastType;
	toasts = { top: [], bottom: [] };
	toastSubscription: Subscription;
	constructor(private toast: ToastService) {}

	ngOnInit() {
		this.toastSubscription = this.toast.exposeEvent().subscribe(event => {
			this.handleEvents(event);
		});
		this.getToasts();
	}

	getToasts() {
		this.toasts.top = this.toast.toasts.filter(conf => conf.position.top);
		const bottomToasts = this.toast.toasts.filter(conf => conf.position.bottom);
		bottomToasts.reverse();
		this.toasts.bottom = bottomToasts;
	}

	handleEvents(event) {
		if (event.type === 'refreshedToasts') {
			this.getToasts();
		}
	}

	ngOnDestroy() {
		this.toastSubscription?.unsubscribe();
	}
}