import { Component, Injector, ViewChild, ViewEncapsulation, Input, Output, EventEmitter, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { LocationListDto, LocationServiceProxy, PostalCodeZoneServiceProxy, CreatePostalCodeInput, CreateOrEditPostalCodeZoneDto, CreateZoneInput, PostalCodeZoneListDto, ZoneServiceProxy, ZoneListDto, PostalCodeServiceProxy } from '@shared/service-proxies/service-proxies';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { FormGroup, FormControl } from '@angular/forms';
import { finalize } from 'rxjs/operators';
import * as moment from 'moment';
import * as _ from 'lodash';
import { Location } from '@angular/common';
import { Paginator } from 'primeng/components/paginator/paginator';
import { Table } from 'primeng/components/table/table';
import { HttpClient } from '@angular/common/http';
declare var KTWizard: any;
declare var $: any;
declare var KTApp: any;
declare let swal: any;

@Component({
    templateUrl: './postal-code-zones.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
    styleUrls: ['./postal-code-zones.component.less']
})
export class PostalCodeZonesComponent extends AppComponentBase {
    newPostalCodeZone = false;
    active = false;
    saving = false;
    id: any;
    i: any;
    postalCodeZones: any;
    
    zones: any;
    postalCodes: any;
    dynamicArray: Array<any> = [];
    newDynamic: any = {};
    locationName: string;
    locationTimeZone: string;
    index=-1;
    zone: Array<any> = []; //CreateZoneInput = new CreateZoneInput();
    postalCode: Array<any> = [];     //CreatePostalCodeInput = new CreatePostalCodeInput();
    zoneContainer: Array<any> = [];
    postalCodeContainer: Array<any> = [];
    postalCodeZoneInput: CreateOrEditPostalCodeZoneDto = new CreateOrEditPostalCodeZoneDto;
    postalCodeId: number;
    zoneValidation: boolean = true;
    postalValidation: boolean = true;
    postalFilter: string
    uniqueZones: Array<any> = [];
    // sample: any
    addrow = false;
    selectedValues: Array<any> = [];
    advancedFiltersAreShown = false;
    filterText: string;
    red: Array<any>=[];
    filterTxt: string;
    postalCodeValue: string;
    zoneName: string;
    @ViewChild('dataTable', {static: true}) dataTable: Table;
    @ViewChild('paginator', {static: true}) paginator: Paginator;
    isPrimary: boolean = false;

    uploadUrl: string;
    constructor(
        injector: Injector,
        private _postalCodeZoneServiceProxy: PostalCodeZoneServiceProxy,
        private _locationServiceProxy: LocationServiceProxy,
        private _postalCodeServiceProxy: PostalCodeServiceProxy,
        private _zoneServiceProxy: ZoneServiceProxy,
        private _httpClient: HttpClient,
        private _router: Router,
        private route: ActivatedRoute,
        private _location: Location,
    ) {
        super(injector);
        
    }


    ngOnInit() {
        // $('.kt-select2').select2({ 
        //     placeholder: "Select location.."
        // });
        
        this.uploadUrl = AppConsts.remoteServiceBaseUrl + '/Import/ImportFromExcel';
        this.red=[];
        this.route.paramMap.subscribe(params => {
            this.id = params.get("id")
        });
        

        this._zoneServiceProxy.getAllZonesByLocation(this.id, undefined).subscribe(result => {
            this.zones = result.items;
            //console.log(this.zones);
        });

        this._postalCodeServiceProxy.getAllPostalCode().subscribe(result => {
            this.postalCodes = result.items;
            
            //console.log(this.postalCodes);
        });
        // this.getPostalCodeZones()
    }

    getPostalCodeZones(event?: LazyLoadEvent){
        // this._locationServiceProxy.getLocation(
        //     this.id,
        //     undefined,
        //     undefined,
        //     undefined,
        //     undefined,
        //     undefined,
        //     undefined,
        //     undefined,
        //     undefined
        // ).subscribe(result => {
        //     console.log(result.items[0]);
        //     this.locationName = result.items[0]['name'];
        //     this.locationTimeZone = result.items[0].timeZone == null || result.items[0].timeZone == undefined ? "" : result.items[0].timeZone.value;

        //     if (this.primengTableHelper.shouldResetPaging(event)) {
        //         this.paginator.changePage(0);
        //         return;
        //     }
        //     this.spinnerService.show();
        //     this._postalCodeZoneServiceProxy.getPagedGroupedPostalCodeZone(
        //         this.id,
        //         this.filterTxt,
        //         this.postalCodeValue,
        //         this.zoneName,
        //         this.primengTableHelper.getSorting(this.dataTable),
        //         this.primengTableHelper.getMaxResultCount(this.paginator, event),
        //         this.primengTableHelper.getSkipCount(this.paginator, event)
        //     ).pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
        //         this.primengTableHelper.totalRecordsCount = result.totalCount;
        //         this.primengTableHelper.records = result.items;
        //         this.isPrimary = false;
        //         for(var x=0; x<result.items.length; x++){
        //             if(result.items[x].isPrimary){
        //                 this.isPrimary = true;
        //                 break;
        //             }
        //         }
        //         this.spinnerService.hide();  
        //     });

        this._locationServiceProxy.getLocationTableOnly(
            this.id,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined
        ).subscribe(result => {
            // console.log(result.items[0]);
            this.locationName = result[0]['name'];
            this.locationTimeZone = result[0].timeZone == null || result[0].timeZone == undefined ? "" : result[0].timeZone.value;

            if (this.primengTableHelper.shouldResetPaging(event)) {
                this.paginator.changePage(0);
                return;
            }
            this.spinnerService.show();
            this._postalCodeZoneServiceProxy.getPagedGroupedPostalCodeZone(
                this.id,
                this.filterTxt,
                this.postalCodeValue,
                this.zoneName,
                this.primengTableHelper.getSorting(this.dataTable),
                this.primengTableHelper.getMaxResultCount(this.paginator, event),
                this.primengTableHelper.getSkipCount(this.paginator, event)
            ).pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
                this.primengTableHelper.totalRecordsCount = result.totalCount;
                this.primengTableHelper.records = result.items;
                this.isPrimary = false;
                for(var x=0; x<result.items.length; x++){
                    if(result.items[x].isPrimary){
                        this.isPrimary = true;
                        break;
                    }
                }
                this.spinnerService.hide();  
            });

            // this._postalCodeZoneServiceProxy.getGroupedPostalCodeZoneList(this.id).pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
            //     console.log("grouped")
            //     this.uniqueZones = result
            //     for(let i = 0; i < this.uniqueZones.length ; i++)
            //     {
            //         this.red.push(this.uniqueZones[i].postalCodes)
            //     }
            //     console.log(this.red)
            //     console.log(result)
            //     // console.log(this.uniqueZones[0].postalCodes)
            //     this.spinnerService.hide();
            // });

        });
    }    

    removeDuplicate(origArray, property){
        var newArray = [];
     var lookupObj  = {};

     for(var i in origArray) {
        lookupObj[origArray[i][property]] = origArray[i];
     }

     for(i in lookupObj) {
         newArray.push(lookupObj[i]);
     }
      return newArray;
    }

    searchPostalCode(index){
        var postal = $("#auto"+index).val()
        this._postalCodeServiceProxy.getAllPostalCodeAutoComplete(postal,undefined).subscribe(result => {
            this.postalCodes = result.items;
            console.log(this.postalCodes);
        });
    }

    ngAfterViewInit(){
        
    }

    uploadExcel(data: { files: File }): void {
        //this.backgroundProcessListener();
        //this.importRouteScheduleTracking.clearMessages();
        //this.importRouteScheduleTracking.modal.show();
        const formData: FormData = new FormData();
        const file = data.files[0];
        formData.append('file', file, file.name);
        formData.append('key','zoneLocation');
        formData.append('loadDate', moment().tz(localStorage.getItem('timeZoneId')).format());
        formData.append('locationId',this.id);
        // formData.append('entity','addresses','addresses');
        console.log(this.id);
        this._httpClient
            .post<any>(this.uploadUrl, formData)
            .subscribe(response => {
                if (response.success) {
                    this.notify.info('Import process is queued. Please wait');
                    //this.toggle(true);
                } else if (response.error != null) {
                    this.notify.error(this.l('ImportFailed'));
                    //this.toggle(false);
                }
            });
    }


    onUploadExcelError(): void {
        this.notify.error(this.l('ImportFailed'));
    }

    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
        // console.log(this.selectedValues)
    }

    // addRow(index) {
    //     this.postalValidation=false;
    //     this.zoneValidation=false;
    //     let that = this;
    //     this.addrow = true;
    //     this.newDynamic = { name: "", value: "", city: "", state: "", country: "" };
        
    //     setTimeout(function(){
    //         $('.kt-select2').select2();
    //         // $('#value'+that.index).change(function () {
    //         //     console.log("index"+that.index)
    //         //     //  that.postalCodeId = $("#value"+that.index+" option:selected").val()
    //         //     // console.log(that.postalCodeId)
    //         //     // var postalCodeId = $("#value"+that.index+" option:selected").val()
    //         //     // that._postalCodeServiceProxy.getPostalCodeEdit(that.postalCodeId).subscribe(result => {
    //         //     //     //this.postalCodes = result.items;
    //         //     //     that.dynamicArray[that.index]['city'] = result.city;
    //         //     //     that.dynamicArray[that.index]['state'] = result.state;
    //         //     //     that.dynamicArray[that.index]['country'] = result.country;
    //         //     //     // $("#city"+that.index).text(result.city);
    //         //     //     // $("#state"+that.index).text(result.state);
    //         //     //     // $("#country"+that.index).text(result.country);
    //         //     //     // console.log(that.dynamicArray)
    //         //     // });
    //         //     that.postalValidation=true  
    //         //   });
    //           $('#name'+that.index).change(function () {
    //             that.zoneValidation=true 
    //           });
    //         }, 50);
    //         this.dynamicArray.push(this.newDynamic);
    //     that.index++
    //     return true;
    // }

    // onChange(postalCodeId, index) {
    //     console.log("rider change")
    //     // this._postalCodeServiceProxy.getPostalCodeEdit(postalCodeId).subscribe(result => {
    //     //     //this.postalCodes = result.items;
    //     //     this.dynamicArray[index]['city'] = result.city;
    //     //     this.dynamicArray[index]['state'] = result.state;
    //     //     this.dynamicArray[index]['country'] = result.country;

    //     // });


    // }

    // deleteRow(index) {

    //     this.dynamicArray.splice(index, 1);
    //     return true;

    // }

    // handleChange(input) {
    //     if (input.value < 0) input.value = 0;
    //     if (input.value > 100) input.value = 2;
    // }

    reloadPage(): void {

        this.ngOnInit();
    }


    deleteZones(zoneId,zoneName): void {
        this.message.confirm(
            this.l('ZoneWarningMessage', zoneName),
            this.l('AreYouSure'),
            (isConfirmed) => {
                if (isConfirmed) {
                    
                    this._postalCodeZoneServiceProxy.deleteZonesZonesLocationPostalCodeZones(zoneId)
                        .subscribe(() => {
                            this.reloadPage();
                            this.notify.info(this.l('SuccessfullyDeleted'));
                        });     
                   
                }
            }
        );
    }

    // createOrEdit(url: any, id?: number) {


    //     this.message.confirm(
    //         '',
    //         '',
    //         (isConfirmed) => {
    //             if (isConfirmed) {

    //                 if (id != null) {
    //                     var myurl = `${url}/${id}`;
    //                 } else {
    //                     var myurl = `${url}`;
    //                 }
    //                 console.log(myurl);

    //                 this._router.navigateByUrl(myurl);


    //             }
    //         }
    //     );
    // }
    goBack() {
        this._location.back();
    }


}