import {
    animate,
    state,
    style,
    transition,
    trigger
} from '@angular/animations';
import { CommonModule } from '@angular/common';
import { Component, ModuleWithProviders, NgModule } from '@angular/core';
import { DefaultNoComponentGlobalConfig, GlobalConfig, Toast as BaseToast, ToastPackage, ToastrService, TOAST_CONFIG } from 'ngx-toastr';

@Component({
    selector: '[toast-component2]',
    template: `
    <button *ngIf="options.closeButton" (click)="remove()" type="button" class="toast-close-button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    <div class="icon">
    <i></i>
    </div>
    <div>
    <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
    {{ title }} <ng-container *ngIf="duplicatesCount">[{{ duplicatesCount + 1 }}]</ng-container>
    </div>
    <div *ngIf="message && options.enableHtml" role="alertdialog" aria-live="polite"
    [class]="options.messageClass" [innerHTML]="message">
    </div>
    <div *ngIf="message && !options.enableHtml" role="alertdialog" aria-live="polite"
    [class]="options.messageClass" [attr.aria-label]="message">
    {{ message }}
    </div>
    </div>
    <div *ngIf="options.progressBar">
    <div class="toast-progress" [style.width]="width + '%'"></div>
    </div>
    `,
    animations: [
        trigger('flyInOut', [
            state('inactive', style({ opacity: 0 })),
            state('active', style({ opacity: 1 })),
            state('removed', style({ opacity: 0 })),
            transition(
                'inactive => active',
                animate('{{ easeTime }}ms {{ easing }}')
            ),
            transition(
                'active => removed',
                animate('{{ easeTime }}ms {{ easing }}')
            ),
        ]),
    ],
    preserveWhitespaces: false,
})
export class BitwardenToast extends BaseToast {
    constructor(protected toastrService: ToastrService, public toastPackage: ToastPackage) {
        super(toastrService, toastPackage);
    }
}

export const BitwardenToastGlobalConfig: GlobalConfig = {
    ...DefaultNoComponentGlobalConfig,
    toastComponent: BitwardenToast,
  };

@NgModule({
    imports: [CommonModule],
    declarations: [BitwardenToast],
    exports: [BitwardenToast],
})
export class BitwardenToastModule {
    static forRoot(config: Partial<GlobalConfig> = {}): ModuleWithProviders<BitwardenToastModule> {
        return {
            ngModule: BitwardenToastModule,
            providers: [
                {
                    provide: TOAST_CONFIG,
                    useValue: {
                        default: BitwardenToastGlobalConfig,
                        config: config,
                    },
                },
            ],
        };
    }
}