import { Component, Injector, ViewChild, ViewEncapsulation, Input } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
    LocationServiceProxy, CreateLocationContactInput, AddressServiceProxy, CreateContactInput, ContactServiceProxy, CreateAddressInput, UpdateLocationInput, UpdateContactInput, UpdateAddressInput, TimeZoneServiceProxy, PostalCodeServiceProxy, CreateContactAddressInput, DistanceInputApi, TrafficInputApi, CreatePostalCodeInput, PostalCodeZoneRegexListDto, RouteServiceProxy, ControllerRouteServiceProxy, LocationGenerationTypeEnum
    
} from '@shared/service-proxies/service-proxies';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { Paginator } from 'primeng/components/paginator/paginator';
import { Table } from 'primeng/components/table/table';
import { finalize } from 'rxjs/operators';
import * as moment from 'moment';
import { PrimengTableHelper } from '@shared/helpers/PrimengTableHelper';
import * as _ from 'lodash';
import { AddressFormComponent } from '@app/shared/layout/form/address-form.component';
import {Location} from '@angular/common';
import { CommonLookupModalComponent } from '@app/shared/common/lookup/common-lookup-modal.component';
declare var KTWizard: any;
declare var $: any;
declare var KTApp: any;
declare let swal: any;

@Component({
    templateUrl: './create-update-location.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})
export class CreateUpdateLocationComponent extends AppComponentBase {
    // @ViewChild('dataTable', {static: true}) dataTable: Table;
    // @ViewChild('paginator', {static: true}) paginator: Paginator;
    // @ViewChild('createOrderModal') createOrderModal: CreateOrderModalComponent;
    @ViewChild(AddressFormComponent, { static: false }) addressForm;
    @ViewChild('generationTypeList', {static: true}) generationTypeList: CommonLookupModalComponent;

    options: {
        startStep: 1,
        manualStepForward: false
    };
    
    id: any;
    active = false;
    saving = false;

    
    defaultTimezone: any;
    defaultCountry: any;
    defaultState: any;
    defaultPostal: any;
    defaultCity: any;

    selectedTimezone: any;
    selectedCountry: any;
    selectedPostalCode: any;
    selectedState: any;
    selectedCity: any;
    selectedAddressType: any;
    selectedGenerationType: any;

    trafficMultiplier: any;
    maxDistance: any;
    distanceMultiplier: any;
    
    
    @Input() location: CreateLocationContactInput = new CreateLocationContactInput();
    
    
    contact: CreateContactAddressInput = new CreateContactAddressInput();
    address: CreateAddressInput = new CreateAddressInput();
    postalCodeInput: CreatePostalCodeInput = new CreatePostalCodeInput();
    
    distanceList: Array<DistanceInputApi> = [];
    trafficList: Array<TrafficInputApi> = [];

    country: any;
    filteredCountries: any;
    city: any;
    filteredCities: any;
    state: any;
    filteredStates: any;
    timeZone: any;
    filteredTimeZones: any;
    postal: any;
    filteredPostal: any;
    swal: any;
    validator: any;
    trafficStartTime: any;
    trafficEndTime: any;
    inactive: boolean = true;
    postalCodeRegExList: PostalCodeZoneRegexListDto [];
    driverThreshold: any;
    driverThresholdId: any;
    searchLocationGenerationType: boolean;
    generationTypeId: any;
    txtLocationGenerationTypeFilter: any;
    showSearchOnStart: any;
    generationTime: any;
    locationGenerationType = LocationGenerationTypeEnum;

    constructor(
        injector: Injector,
        private _locationService: LocationServiceProxy,
        private _timeZoneService: TimeZoneServiceProxy,
        private _postalCodeService: PostalCodeServiceProxy,
        private _addressService: AddressServiceProxy,
        private _contactService: ContactServiceProxy,
        private router: Router,
        private route: ActivatedRoute,
        private _location:Location,
        private _postalCodeServiceProxy: PostalCodeServiceProxy,
        private _routeServiceProxy: ControllerRouteServiceProxy

    ) {
        super(injector);
        $(document).ready(() => {
                    // this.KTWizard2();
        });      
    }
    private getDriverInactiveThreshold(): void {
        this._routeServiceProxy.getDriverInactiveThreshold().subscribe(result =>{
            this.driverThreshold = result;
        });
    }
    ngOnInit(){
        this.getPostalCodeRegEx();
        this.getDriverInactiveThreshold();
        this.showSearchOnStart = true;
        if(abp.features.isEnabled("App.FBXFeature")){
            if(this.location.loadLimit == null){
                this.location.loadLimit= 30
            }
        }

        $('.kt-select2').select2();
        this.route.paramMap.subscribe(params => {
            this.id = params.get("id")
        })
        
        $("#timeZoneSelectInput").change(function(){
                this.selectedTimezone = $("#timeZoneSelectInput option:selected").text();
                $("#selectedTimezone").text(this.selectedTimezone);
        });

        $("#countrySelectInput").change(function(){
                this.selectedCountry = $("#countrySelectInput option:selected").text();
                $("#selectedCountry").text(this.selectedCountry);
        });

        $("#postalSelectInput").change(function(){
                this.selectedPostalCode = $("#postalSelectInput option:selected").text();
                $("#selectedPostalCode").text(this.selectedPostalCode);
        });

        $("#stateSelectInput").change(function(){
                this.selectedState = $("#stateSelectInput option:selected").text();
                $("#selectedState").text(this.selectedState);
        });
        $("#citySelectInput").change(function(){
                this.selectedCity = $("#citySelectInput option:selected").text();
                $("#selectedCity").text(this.selectedCity);
        });
        $("#addressTypeSelectInput").change(function () {
            this.selectedAddressType = $("#addressTypeSelectInput option:selected").text();
            $("#selectedAddressType").text(this.selectedAddressType);
        });

        var KTWizard2=function(){
            var e,r,i;
            return{init:function(){var t;KTUtil.get("kt_wizard_v2"),e=$("#kt_form"),
            (i=new KTWizard("kt_wizard_v2",
            {startStep:1,clickableSteps:!0})).on("beforeNext",function(e){!0!==r.form()&&e.stop()}),
            i.on("beforePrev",function(e){!0!==r.form()&&e.stop()}),i.on("change",function(e){KTUtil.scrollTop()}),
            r=e.validate({ignore:":hidden",
            rules:{
            name:{required:!0},
            minutesPerMileInput:{required:!0},
            minutesPerStopInput:{required:!0},
            timeZoneSelectInput:{required:!0},
            firstNameInput:{required:!0},
            lastNameInput:{required:!0},
            Address1:{required:!0},
            postalSelectInput:{required:!0},
            countrySelectInput:{required:!0},
            defaultGenerationTypeId: { required: true},
            citySelectInput:{required:!0}},
            invalidHandler:function(e,r){KTUtil.scrollTop(),swal.fire({title:"",text:"There are some errors in your submission. Please correct them.",
            type:"error",confirmButtonClass:"btn btn-secondary"})},
            submitHandler:function(e){}})}}}();
            jQuery(document).ready(function(){KTWizard2.init()});

        this.getGenerationTypesInit();
        
    }

    ngAfterViewInit(){
        let maxcount = 1000;
        this.filterTimeZones(maxcount);
        $('.kt-select2').select2({
            sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
        });
        //this.KTWizard2();
        // this.filterCountries(maxcount);
        // this.filterPostal(maxcount);
        // this.filterCities(maxcount);
        // this.filterStates(maxcount);

    }

    isNumeric = (val: string) : boolean => {
        return !isNaN(Number(val));
     }
   
    save(): void {
            this.saving = true;
            this.contact.address = this.addressForm.address;
            
            // this.contact.address.postalCodeId = Number((<HTMLInputElement>document.getElementById('postalSelectInput')).value);
            if (Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value) == 0) {
                this.contact.address.addressTypeId = null;
            }
            else {
                this.contact.address.addressTypeId = Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value);
            }
            this.location.generationTime = this.generationTime == undefined ? null : new Date(this.generationTime).toLocaleTimeString('en-US', { hour12: true, 
                hour: "numeric", 
                minute: "numeric",
                second: "numeric"
                }) as any;
            this.location.generationType = this.generationTypeId;

            // this.contact.address = this.address;
            this.location.timeZoneId = Number((<HTMLInputElement>document.getElementById('timeZoneSelectInput')).value);
            this.location.postalCodeRegEx = $("#regExSelectInput").val();
            this.location.contact = this.contact;
            this.location.distanceAdjustment = this.distanceList;
            this.location.trafficAdjustment = this.trafficList;
            this.location.inActive = !this.inactive
            this.location.etaRoundUp = $('#etaRoundUp').val()
            this.location.driverInActiveThreshold = this.isNumeric($("#driverInactive").val()) ? $("#driverInactive").val() : undefined;        

            
            this.postalCodeInput.city = this.addressForm.city
            this.postalCodeInput.state = this.addressForm.state
            this.postalCodeInput.value = this.addressForm.value
            this.postalCodeInput.country = this.addressForm.country
            this._postalCodeServiceProxy.createPostalCode(this.postalCodeInput)
            .pipe()
            .subscribe(result => {
                this.location.contact.address.postalCodeId = result
                this._locationService.createLocationContact(this.location)
                .pipe(finalize(() => { this.saving = false; }))
                .subscribe(() => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.router.navigate(['/app/sprintship/locations']);
                });
            });
    }


    filterTimeZones(maxcount): void {
      this._timeZoneService.getTimeZone(
          undefined,
          undefined,
          undefined,
          undefined,
          maxcount,
          undefined
      ).subscribe(result => {
          this.filteredTimeZones = result.items;
      });
    }

    

    // Class definition
    KTWizard2(): void  {
        // Base elements
        var wizardEl;
        var formEl;
        var validator;
        var wizard;
          
        // Private functions
        var initWizard = function () {
            // Initialize form wizard
            wizard = new KTWizard('kt_wizard_v2', {
                startStep: 1,
            });

            // Validation before going to next page
            wizard.on('beforeNext', (wizardObj) => {
                if(wizardObj.currentStep == 1) {
                    if($('#nameInput').val() == '' 
                    || $('#minutesPerMileInput').val() == '' 
                    || $('#minutesPerStopInput').val() == ''
                    || $('#timeZoneSelectInput').val() == '') {
                    wizardObj.stop();  // don't go to the next step
                  }
               }
               else if(wizardObj.currentStep == 3) {
                  if($('#address1Input').val() == '' || $('#countrySelectInput').val() == '' || $('#postalSelectInput').val() == '' || $('#stateSelectInput').val() == '' || $('#citySelectInput').val() == '') {
                        wizardObj.stop();
                  }
               }
               else if (wizardObj.currentStep == 4) {
                  if ($('#defaultGenerationTypeId').val() == '') {
                      wizardObj.stop();
                  }
               }
            //    console.log(wizardObj.currentStep);
               //console.log($(#nameInput).val());
            });
            // Change event
            wizard.on('change', function(wizard) {
                KTUtil.scrollTop();    
            });
        }
        wizardEl = KTUtil.get('kt_wizard_v2');
        formEl = $('#kt_form').serialize();
        
        return initWizard();
        //return initValidation();
        //return initSubmit();
    }

    navigate(url: any, id?: number){
        if(id != null){
            var myurl = `${url}/${id}`;
        }else{
            var myurl = `${url}`;
        }
        console.log(myurl);
        this.router.navigateByUrl(myurl);
    }

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

    addDistance(){
        let key, distance, value;
        distance = Number((<HTMLInputElement>document.getElementById('maxDistance')).value);
        value = Number((<HTMLInputElement>document.getElementById('distanceMultiplier')).value);
        let distInput = new DistanceInputApi();
        distInput.maxDistance = distance;
        distInput.multiplier =  value;
        this.distanceList.push(distInput);
    }

    addTimeTraffic(){
        let key, start, end, value;
        start = moment(this.trafficStartTime).local().format("HH:mm:ss");
        end = moment(this.trafficEndTime).local().format("HH:mm:ss");
        console.log(start);
        console.log(end);
        value = Number((<HTMLInputElement>document.getElementById('trafficMultiplier')).value);
        let traffictInput = new TrafficInputApi();
        traffictInput.trafficStartTime = start;
        traffictInput.trafficEndTime =  end;
        traffictInput.multiplier =  value;
        this.trafficList.push(traffictInput);
    }
    
    removeDistance(distanceItem){
        let key;
        for (key in this.distanceList) {
            if (distanceItem.maxDistance == this.distanceList[key].maxDistance && distanceItem.multiplier == this.distanceList[key].multiplier ) {
                this.distanceList.splice(key, 1)
            }
        }
    }

    removeTimeTraffic(trafficItem){
        let key;
        for (key in this.trafficList) {
            if (trafficItem.trafficStartTime == this.trafficList[key].trafficStartTime && trafficItem.trafficEndTime == this.trafficList[key].trafficEndTime && trafficItem.multiplier == this.trafficList[key].multiplier ) {
                this.trafficList.splice(key, 1)
            }
        }
    }

    getPostalCodeRegEx():void{
        this._locationService.getPostalCodeRegExList().subscribe(result =>{
            this.postalCodeRegExList = result;
        });
    }

    getGenerationTypesInit() {
        this.generationTypeList.configure({
            title: this.l('Select Type'),
            dataSource: (skipCount: number, maxResultCount: number, filter: string, tenantId?: number, locationId?:number) => {
                return this._locationService.getLocationGenerationType(filter);
            }
        });
    }
    
    getLocationGenerationTypeList(filter : any) {
        this.searchLocationGenerationType = false;
        this.generationTypeList.show();
        this.generationTypeList.filterText = filter;
    }

    clearLocationGenerationTypeList(){
        this.txtLocationGenerationTypeFilter = '';
        this.generationTypeId = null;
        this.showSearchOnStart = true;
    }

    selectGenerationType(item) {
        var resultId = item.value;
        var name = item.name
        if(this.searchLocationGenerationType){
            this.generationTypeId = resultId;
            this.txtLocationGenerationTypeFilter = name;
            this.searchLocationGenerationType = false;
            this.selectedGenerationType = name;
            //this.generationTypeId = false;
        }
        else{
            this.generationTypeId = resultId;
            this.txtLocationGenerationTypeFilter = name;
            this.selectedGenerationType = name;
            this.showSearchOnStart = false;
      }
    }

}