import { appModuleAnimation } from "@shared/animations/routerTransition";
import { AppComponentBase } from "@shared/common/app-component-base";
import { Injector, ViewChild, Component, Output, EventEmitter, ElementRef } from "@angular/core";
import { ModalDirective } from "ngx-bootstrap";
import { FleetServiceProxy, CreateFleetInput } from "@shared/service-proxies/service-proxies";
import { finalize } from "rxjs/operators";


@Component({

    selector: 'flyOutFleetModalComponent',
    templateUrl: './fleet-modal.component.html',
    animations: [appModuleAnimation()]

})

export class FlyOutFleetModalComponent extends AppComponentBase{

    constructor(

        injector:Injector,
        private _fleetService: FleetServiceProxy

    ){

        super(injector)

    }

    @ViewChild('modalCreate', {static: true}) modal: ModalDirective
    @ViewChild('fleetName', { static: true }) fleetName : ElementRef

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    @Output() iconChange = new EventEmitter<boolean>();

    active=false
    saving=false
    fleet: CreateFleetInput = new CreateFleetInput();

    iconChanger(change: boolean){
        this.iconChange.emit(change)
    }

    save(): void{

        this.saving=true
        this._fleetService.createFleet(this.fleet)
            .pipe(finalize(() => this.saving=false))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'))
                this.close()
                this.modalSave.emit(this.fleet)
                this.iconChanger(true)
            })

    }

    onShow():void{

        this.fleetName.nativeElement.focus()

    }

    show(): void{

        this.active=true
        this.modal.show()

    }

    close(): void{
        this.fleet.name=null
        this.modal.hide()
        this.active=false

    }

}