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

@Component({

    selector: 'flyOutPackageTypeModalComponent',
    templateUrl: './package-type-modal.component.html',
    animations: [appModuleAnimation()]

})

export class FlyOutPackageTypeModalComponent extends AppComponentBase{

    constructor(

        injector:Injector,
        private _packagesService: ShippingPackageServiceProxy,
        private el: ElementRef

    ){

        super(injector)

    }

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

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

    packagetype: CreateShippingPackageInput = new CreateShippingPackageInput();

    active=false
    saving=false
    packagetypename: String;

    iconChanger(icon: boolean){

        this.iconChange.emit(icon)

    }

    show(): void{

        this.packagetype.name=null
        this.active=true
        this.modal.show()

    }

    close(): void{

        this.modal.hide()
        this.active=false

    }

    onShown(): void{
        
        this.nameInput.nativeElement.focus()

    }

    save(): void{

        this.saving=true
        this._packagesService.createShippingPackage(this.packagetype)
            .pipe(finalize(() => this.saving = false))
            .subscribe(() =>{
                this.notify.info(this.l('SavedSuccessfully'))
                this.close()
                this.iconChanger(true)
                this.modalSave.emit(this.packagetype)
            });
        

    }

}