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, UpdateZoneInput, UpdatePostalCodeZonesInput, ToBeDeletedPostalCodeZonesInput, ToBeCreatedPostalCodeZonesInput } 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: 'editZoneModalComponent',
    templateUrl: './edit-postal-code-zones-modal.component.html'
})
export class EditZoneModalComponent extends AppComponentBase {

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

active= false;
saving = false;
locationId : number;
zoneName: string;
zoneId: number;
newPostalCodeZone = false;


zoneInput: CreateZoneInput = new CreateZoneInput();
zoneLocationInput: CreateZoneLocationInput = new CreateZoneLocationInput();
updateZoneInput: UpdateZoneInput = new UpdateZoneInput();
updatePostalCodeZonesInput: UpdatePostalCodeZonesInput = new UpdatePostalCodeZonesInput();

selectedValues: Array<any> = [];
unselectedValues: Array<any> = [];
zoneContainer: Array<any> = [];
postalCodeContainer: Array<any> = [];
tobeDeletedPostalCodeZonesContainer: Array<any> = [];
tobeAddedValues: Array<any>= [];
tobeAddedPostalCodeZonesContainer: Array<any>= [];

postalCodes: Array<any>= [];
zonePostalCodes: Array<any>= [];
zonePrimary: boolean;
hasPrimary: boolean;
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();
     }

    show(zoneId:number, zonePrimary: boolean, hasPrimary: boolean): void {
        this.zoneId = zoneId;
        this.zonePrimary = zonePrimary;
        this.hasPrimary = hasPrimary;
        console.log(zonePrimary);
        console.log(hasPrimary);
        this._postalCodeZoneServiceProxy.getGroupedPostalCodeZoneListByZoneId(
            zoneId
        ).pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
            
            this.zoneName = result[0].zoneName
            this.zonePostalCodes = result[0].postalCodes;
            this.checkPrimary = result[0].isPrimary;
            // console.log(this.zonePostalCodes[0]['id'])
            var that = this
            for(var i = 0 ; i < this.zonePostalCodes.length ; i++){
                this.selectedValues.push({id: this.zonePostalCodes[i]['id'], 
                                            value: this.zonePostalCodes[i]['value'], 
                                            city: this.zonePostalCodes[i]['city'], 
                                            state: this.zonePostalCodes[i]['state'], 
                                            country: this.zonePostalCodes[i]['country']})
            }
            // this.spinnerService.hide();  
        });
        // console.log("selected Values")
        // console.log(this.selectedValues)
        // console.log(this.locationId)
        this.zoneLocationInput.zoneName = ""
           this.active = true;
         this.modal.show();

    }

    update(): void {
        var that = this
        this.updateZoneInput.id = this.zoneId
        this.updateZoneInput.name = this.zoneName;
        this.updateZoneInput.isPrimary = this.checkPrimary;
        this._zoneAppService.updateZone(this.updateZoneInput)
                            .pipe()
                            .subscribe(result => {

                                this.unselectedValues.forEach(function (value, i) {
                                    let tobeDeletedPostalCodeZones = new ToBeDeletedPostalCodeZonesInput({
                                                       postalCodeId: value.postalCodeId,
                                                       zoneId: value.zoneId
                                                    });
                                                    // console.log(tobeDeletedPostalCodeZones)
                                    // tobeDeletedPostalCodeZones
                                    that.tobeDeletedPostalCodeZonesContainer.push(tobeDeletedPostalCodeZones)
                                    // that.updatePostalCodeZonesInput.unselectedValues.push(tobeDeletedPostalCodeZones)
                                });
                                if(this.tobeAddedValues.length == 0){
                                    this.updatePostalCodeZonesInput.selectedValues = []
                                }
                                else{
                                    this.tobeAddedValues.forEach(function (value, i){
                                        let tobeCreatedPostalCodeZones = new ToBeCreatedPostalCodeZonesInput({
                                            postalCodeId: value.postalCodeId,
                                            zoneId: value.zoneId
                                        });
                                        that.tobeAddedPostalCodeZonesContainer.push(tobeCreatedPostalCodeZones)
                                    });
                                    this.updatePostalCodeZonesInput.selectedValues = this.tobeAddedPostalCodeZonesContainer
                                    // console.log("added");
                                    // console.log(this.tobeAddedPostalCodeZonesContainer);
                                }
                                // console.log(this.tobeDeletedPostalCodeZonesContainer)
                                this.updatePostalCodeZonesInput.unselectedValues = this.tobeDeletedPostalCodeZonesContainer
                                this.tobeDeletedPostalCodeZonesContainer = [];
                                this.tobeAddedPostalCodeZonesContainer = [] ;
                                this.selectedValues = [];
                                this.unselectedValues = [];
                                this.tobeAddedValues = [];
                                this._postalCodeZoneServiceProxy.createDeletePostalCodeZoneChips( this.updatePostalCodeZonesInput)
                                                                .pipe()
                                                                .subscribe(result => {
                                                                    this.notify.info(this.l('SavedSuccessfully'));
                                                                    this.close();
                                                                    this.modalSave.emit(null);   
                                                                })
                                                     
                            });
        
        // this.zoneLocationInput.locationId = this.locationId
        // let that = this
        // this.newPostalCodeZone = true;
        // this._zoneAppService
        //     .createZoneLocationReturnZoneId(this.zoneLocationInput)
        //     .pipe()
        //     .subscribe(result => {
        //          console.log(result)
        //         this.notify.info(this.l('SavedSuccessfully'));
        //             this.selectedValues.forEach(function (value, i) {
        //                 let newZone = new CreateZoneInput({ name: result.toString(), locationId: that.locationId });
        //                 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._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;
            // console.log(this.postalCodes);
        });
    }

    close(): void {

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

    clear(event){
        // console.log(event.id)
        if(this.selectedValues.findIndex(x=> x.id == event.id) > -1)
        {
            let remove1 = this.selectedValues.findIndex(x=> x.id == event.id)
            this.selectedValues.splice(remove1, 1)
            // console.log(this.selectedValues)
            // console.log("insideif")
        }
        else
        {
            let remove = this.tobeAddedValues.findIndex(x=> x.id == event.id)
            this.tobeAddedValues.splice(remove, 1)
            // console.log("insidenewif")
            // console.log(this.tobeAddedValues)
        }

        this.unselectedValues.push({postalCodeId: event.id, zoneId: this.zoneId})
        // console.log("updated selected values");
        // console.log(this.selectedValues)
        // console.log("updated unselected values");
        // console.log(this.unselectedValues)
    }

    select(event){
        // this.selectedValues.push({id: event.id, 
        //                         value: event.value, 
        //                         city: event.city, 
        //                         state: event.state, 
        //                         country: event.country})
        
        this.tobeAddedValues.push({postalCodeId: event.id,
                                    zoneId: this.zoneId})
                                    console.log(this.tobeAddedValues);
        // 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
        // console.log(this.selectedValues)
    }
}