import { Component, ViewChild, Injector, Output, EventEmitter} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { TimeZonesServiceProxy, CreateOrEditTimeZoneDto, SettingScopes, OrderPackageServiceProxy, ShippingPackageServiceProxy, PackageOptionsServiceProxy, CreateOrEditPackageOptionsDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';
import { pipe } from 'rxjs';


@Component({
    selector: 'createOrEditPackageOptionsModal',
    templateUrl: './create-or-edit-package-option-modal.component.html'
})
export class CreateOrEditPackageOptionModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;


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

    active = false;
    saving = false;

    orderPackages: any;
    packageOptionsId : number;
    packages: Array<{ id: number, name: string, total: number }> = new Array();
    timeZone: CreateOrEditTimeZoneDto = new CreateOrEditTimeZoneDto();
    packageOptionsInput: CreateOrEditPackageOptionsDto = new CreateOrEditPackageOptionsDto();
    // defaultTimezoneScope: SettingScopes = SettingScopes.Tenant;


    constructor(
        injector: Injector,
        private _timeZonesServiceProxy: TimeZonesServiceProxy,
        private _packageOptionsServiceProxy: PackageOptionsServiceProxy,
        private _orderPackageService: OrderPackageServiceProxy,
        private _controllerRoutePackages: ShippingPackageServiceProxy,
    ) {
        super(injector);
    }

    ngOnInit(){
        $('.kt-select2').select2();
    }

    show(id?: number): void {
        this.getPackages();
        this.packageOptionsId = id;
        if (!id) {
            this.packageOptionsInput.code = ""
            this.packageOptionsInput.value = ""
            this.packageOptionsInput.key = ""
            // this.packageOptionsInput.packageId = null
            this.active = true;
                this.modal.show();
        } else {
            this._packageOptionsServiceProxy.getAllPackageOptions(
                id,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined
            )
            .subscribe(result=>{
                // this.packageOptionsInput = result.items[0]
                this.packageOptionsInput.id = result.items[0].id
                this.packageOptionsInput.packageId = result.items[0].packageId
                this.packageOptionsInput.code = result.items[0].code
                this.packageOptionsInput.key = result.items[0].key
                this.packageOptionsInput.value = result.items[0].value
                this.active = true;
                this.modal.show();
            })
                
        }
        // console.log("hello my friend")
        
       
    }
    onShow(){
        $('.kt-select2').select2();
    }

    getPackages() {
        this.packages = [];
        this._controllerRoutePackages.getShippingPackageListOptions(undefined, undefined, undefined, undefined, undefined, undefined).subscribe(result => {
            result.forEach(element => {
                if (element.name !== 'Default') {
                    this.packages.push(element);
                }
            });
        });
    }

    save(){
        this.saving = true;
        this.packageOptionsInput.packageId = Number((<HTMLInputElement>document.getElementById('packageOptionsInput')).value);
        console.log(this.packageOptionsInput.packageId)
        this._packageOptionsServiceProxy.createOrEdit(this.packageOptionsInput)
                                        .pipe()
                                        .subscribe(() => {
                                            this.modalSave.emit(null);
                                            this.notify.info(this.l('SavedSuccessfully'));
                                            this.close();
                                        })
            
    }

    close(): void {

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