import {
    Component,
    EventEmitter,
    HostBinding,
    Input,
    Output
} from '@angular/core';
import { SpaToasterMessageI } from './spa-toaster-message.interface';

@Component({
    selector: 'spa-toaster',
    template: `<spn-alert
        *ngFor="let message of messages"
        [spfAutoclose]="message.autoClose"
        [spfCloseable]="message.closeable"
        [spfSeverity]="message.severity"
        [spfTitle]="message.title"
        (spfClose)="doCloseMessage(message.id)">{{message.message}}</spn-alert>`,
    styles: [`
    :host(.spa-toasts-displayer) {
        display: block;
        position: fixed;
        bottom: 85px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 80%;
        z-index: 500;
    }

    spn-alert + spn-alert {
        margin-top: 6px;
    }
    `]
})
export class SpaToasterComponent {
    @HostBinding('class.spa-toasts-displayer') hostClass = true;
    @Input() messages!: SpaToasterMessageI[];
    @Output() spaClose: EventEmitter<number> = new EventEmitter<number>();

    public doCloseMessage(id: number) {
        this.spaClose.emit(id);
    }

}
