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
} 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';
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;

    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;


    @Input() location: CreateLocationContactInput = new CreateLocationContactInput();
    
    contact: CreateContactAddressInput = new CreateContactAddressInput();
    address: CreateAddressInput = new CreateAddressInput();
    country: any;
    filteredCountries: any;
    city: any;
    filteredCities: any;
    state: any;
    filteredStates: any;
    timeZone: any;
    filteredTimeZones: any;
    postal: any;
    filteredPostal: any;
    swal: any;
    validator: any;
    constructor(
        injector: Injector,
        private _locationService: LocationServiceProxy,
        private _timeZoneService: TimeZoneServiceProxy,
        private _postalCodeService: PostalCodeServiceProxy,
        private _addressService: AddressServiceProxy,
        private _contactService: ContactServiceProxy,
        private router: Router,
        private route: ActivatedRoute
    ) {
        super(injector);
        $(document).ready(() => {
                    // this.KTWizard2();
        });      
    }

    ngOnInit(){
   
        $('.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},
            stateSelectInput:{required:!0},
            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()});
        
    }

    ngAfterViewInit(){
        let maxcount = 1000;
        this.filterTimeZones(maxcount);

        // this.filterCountries(maxcount);
        // this.filterPostal(maxcount);
        // this.filterCities(maxcount);
        // this.filterStates(maxcount);

    }

   
    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.contact.address = this.address;
            this.location.timeZoneId = Number((<HTMLInputElement>document.getElementById('timeZoneSelectInput')).value);
            this.location.contact = this.contact;
            console.log(this.location);
            this._locationService.createLocationContact(this.location)
                .pipe(finalize(() => { this.saving = false; }))
                .subscribe(() => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.router.navigate(['/app/sprintship/locations']);
                    console.log(this.location);
                });
    }


    filterTimeZones(maxcount): void {
      this._timeZoneService.getTimeZone(
          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', function(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 == 2) {
                  if($('#firstNameInput').val() == '' || $('#lastNameInput').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();
                  }
               }
            //    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);
    }
    

}