// Angular imports //
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { downgradeComponent } from '@angular/upgrade/static';
declare const angular: angular.IAngularStatic;

// RxJS //
import { Subject } from 'rxjs/Subject';


const styles: any[] = [require('./fb-spinner-button.component.less')];

@Component({
    selector: 'fb-spinner-button',
    templateUrl: './fb-spinner-button.component.html',
    styles: styles
})
export class FbSpinnerButtonComponent implements OnInit {
    @Input() text: string;
    @Input() errorText: string;
    @Input() disabled: boolean;
    @Input() listenOn: Subject<Promise<any>>;
    @Output() onClick: EventEmitter<any> = new EventEmitter<any>();

    isResolvedOrUndefined: boolean = true;
    promiseFailed: boolean = false;

    ngOnInit(): void {
        if (this.listenOn) {
            this.listenOn.subscribe(promise => {
                this.isResolvedOrUndefined = false;
                this.promiseFailed = false;
                promise.then(() => {
                    this.isResolvedOrUndefined = true;
                }).catch(() => {
                    this.promiseFailed = true;
                    this.isResolvedOrUndefined = true;
                });
            });
        }
    }
}

angular.module('fasit')
    .directive('fbSpinnerButton',
    downgradeComponent({
        component: FbSpinnerButtonComponent,
        inputs: [],
        outputs: []
    }) as angular.IDirectiveFactory);