import { Component, ViewChild, Injector, Output, EventEmitter} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { PostalCodesServiceProxy, CreateOrEditPostalCodeDto, CreateZoneInput, ZoneServiceProxy, CreateZoneLocationInput, PostalCodeZoneServiceProxy, PostalCodeServiceProxy, CreatePostalCodeInput, CreateOrEditPostalCodeZoneDto, LocationServiceProxy } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';
import * as countries from '@app/sprintship/countries.json';
import { ActivatedRoute } from '@angular/router';
import { toInt } from 'ngx-bootstrap/chronos/utils/type-checks';


@Component({
    selector: 'createZoneModalComponent',
    templateUrl: './create-zone-modal.component.html'
})
export class CreateZoneModalComponent extends AppComponentBase {

@ViewChild('createZoneModal', { static: true }) modal:ModalDirective
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

active= false;
saving = false;
locationId : number;
postalCodes:any 
zoneInput: CreateZoneInput = new CreateZoneInput();
zoneLocationInput: CreateZoneLocationInput = new CreateZoneLocationInput();

selectedValues: Array<any> = [];
zoneContainer: Array<any> = [];
postalCodeContainer: Array<any> = [];
newPostalCodeZone = false;
postalFilter: any;
isPrimary: boolean = false;
checkPrimary: boolean;

    constructor(
        injector: Injector,
        private _zoneAppService: ZoneServiceProxy,
        private _postalCodeServiceProxy: PostalCodeServiceProxy,
        private _postalCodeZoneServiceProxy: PostalCodeZoneServiceProxy,
        private _locationServiceProxy: LocationServiceProxy,
        private route: ActivatedRoute,
    ) {
        super(injector);
        
    }

    ngOnInit(){
        this.route.paramMap.subscribe(params => {
            this.locationId = parseInt(params.get("id"));
        });
        
    }

    onShown(): void {
        document.getElementById('ZoneName').focus();
        // $('#CountryJson').select2();
        // $('#CountryJson').select2();
     }

    show(isPrimary: boolean): void {
        this.isPrimary = isPrimary;
        this.zoneLocationInput.zoneName = ""
        this.postalFilter = []
           this.active = true;
         this.modal.show();

    }

    save(): void {
        this.zoneLocationInput.locationId = this.locationId
        let that = this
        this.newPostalCodeZone = true;
        this._zoneAppService
            .createZoneLocationReturnZoneId(this.zoneLocationInput)
            .pipe()
            .subscribe(result => {

                this.notify.info(this.l('SavedSuccessfully'));
                    this.selectedValues.forEach(function (value, i) {
                        let newZone = new CreateZoneInput({ name: result.toString(), locationId: that.locationId, isPrimary: that.checkPrimary });
                        that.zoneContainer.push(newZone);
                        // console.log($("#name"+i+" option:selected").val())
                        let newPostalCode = new CreatePostalCodeInput({
                            value: value.id,
                            city: value.city,
                            state: value.state == null ? "" : value.state,
                            country: value.country
                        });
                        that.postalCodeContainer.push(newPostalCode);
                    });
                    let postalCodeZoneInput = new CreateOrEditPostalCodeZoneDto({
                        newPostalCodeZone: this.newPostalCodeZone,
                        locationId: this.locationId,
                        createPostalCodeInput: this.postalCodeContainer,
                        createZoneInput: this.zoneContainer
                    });
                    this.zoneContainer = [];
                    this.postalCodeContainer = [];
                    this.selectedValues = [];
                    this._postalCodeZoneServiceProxy.createOrEditPostalCodeZone(postalCodeZoneInput)
                    .pipe(finalize(() => { this.saving = false; }))
                    .subscribe(() => {
                        this.saving = true;
                        this.notify.info(this.l('SavedSuccessfully'));
                    });
                this.close();
                this.modalSave.emit(null);
            });
    }
    searchPostalCode(){
        var postal = $("#autoInput").val().toString()
        this._postalCodeServiceProxy.getAllPostalCodeAutoComplete(postal,undefined).subscribe(result => {
            this.postalCodes = result.items;
        });
    }

    close(): void {

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

    clear(event){
        var sample = this.selectedValues.findIndex(x=> x.id == event.id)
        this.selectedValues.splice(sample, 1)
    }

    select(event){
        this.selectedValues.push({id: event.id, 
                                value: event.value, 
                                city: event.city, 
                                state: event.state, 
                                country: event.country})
        // this.dynamicArray[this.index]['id'] = event.id
        // this.dynamicArray[this.index]['value'] = event.value
        // this.dynamicArray[this.index]['city']= event.city
        // this.dynamicArray[this.index]['state']= event.state
        // this.dynamicArray[this.index]['country']= event.country
       
    }
}