import { Component, Injector, ViewChild, ViewEncapsulation, ɵConsole } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';

import { AddressServiceProxy, ContactServiceProxy, UpdateContactInput, UpdateAddressInput, 

    PostalCodeServiceProxy, VendorsServiceProxy,
    PasswordComplexitySetting,UserEditDto,UserRoleDto,
    CreateOrUpdateContactUserInput, AddressTypeServiceProxy} from '@shared/service-proxies/service-proxies';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { finalize } from 'rxjs/operators';
import * as moment from 'moment';
import * as _ from 'lodash';
import { ContactFormComponent } from '@app/shared/layout/form/contact.form.component';
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: './edit-vendor.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})
export class EditVendorComponent extends AppComponentBase {

    @ViewChild(ContactFormComponent, { static: false }) contactForm;
    @ViewChild(AddressFormComponent, { static: false }) addressForm;

    active = false;
    saving = false;
    id: any;

    contact: UpdateContactInput = new UpdateContactInput();
    vendor: UserEditDto = new UserEditDto();
    address: UpdateAddressInput = new UpdateAddressInput();
    
    defaultAddressType: any;
    defaultCountry: any;
    defaultState: any;
    defaultPostal: any;
    defaultCity: any;

    fName: string;
    sName : string;
    pNumber: any;
    emailAddress: any;

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

    country: any;
    filteredCountries: any;
    city: any;
    filteredCities: any;
    state: any;
    filteredStates: any;
    postal: any;
    filteredPostal: any;
    addressType: any;
    filteredAddressType: any;

    canChangeUserName = true;
    isActive = true;
    isTwoFactorEnabled: boolean = false //this.setting.getBoolean('Abp.Zero.UserManagement.TwoFactorLogin.IsEnabled');
    isLockoutEnabled: boolean = false //this.setting.getBoolean('Abp.Zero.UserManagement.UserLockOut.IsEnabled');
    passwordComplexitySetting: PasswordComplexitySetting = new PasswordComplexitySetting();
    roles: UserRoleDto[];
    sendActivationEmail = false;
    setRandomPassword = false;
    passwordComplexityInfo = '';

    
    constructor(
        injector: Injector,
        private _contactService: ContactServiceProxy,

        // private _countryService: CountryServiceProxy,
        // private _cityService: CityServiceProxy,
        // private _stateService: StateServiceProxy,

        private _addressTypeService: AddressTypeServiceProxy,
        private _postalCodeService: PostalCodeServiceProxy,
        private _vendorService: VendorsServiceProxy,
        private _addressService: AddressServiceProxy,
        private router: Router,
        private route: ActivatedRoute
    ) {
        super(injector);
    }

    setPasswordComplexityInfo(): void {

        this.passwordComplexityInfo = '<ul>';

        if (this.passwordComplexitySetting.requireDigit) {
            this.passwordComplexityInfo += '<li>' + this.l('PasswordComplexity_RequireDigit_Hint') + '</li>';
        }

        if (this.passwordComplexitySetting.requireLowercase) {
            this.passwordComplexityInfo += '<li>' + this.l('PasswordComplexity_RequireLowercase_Hint') + '</li>';
        }

        if (this.passwordComplexitySetting.requireUppercase) {
            this.passwordComplexityInfo += '<li>' + this.l('PasswordComplexity_RequireUppercase_Hint') + '</li>';
        }

        if (this.passwordComplexitySetting.requireNonAlphanumeric) {
            this.passwordComplexityInfo += '<li>' + this.l('PasswordComplexity_RequireNonAlphanumeric_Hint') + '</li>';
        }

        if (this.passwordComplexitySetting.requiredLength) {
            this.passwordComplexityInfo += '<li>' + this.l('PasswordComplexity_RequiredLength_Hint', this.passwordComplexitySetting.requiredLength) + '</li>';
        }

        this.passwordComplexityInfo += '</ul>';
    }

    
    ngOnInit(){
        $('.kt-select2').select2();
        this.route.paramMap.subscribe(params => {
            this.id = params.get("id")
        })
        // this.KTWizard2();
        this.editView(this.id)

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

        $("#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);
        });

        let maxCount = 1000;
        this.filterAddressTypes(maxCount);

        // this.filterCountries(maxCount);
        // this.filterPostal(maxCount);
        // this.filterCities(maxCount);
        // this.filterStates(maxCount);
        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 },
                                Surname: { required: !0 },
                                EmailAddress: { required: !0, email: !0 },
                                locationSelectInput: { required: !0 },
                                UserName: { required: !0, minlength: 5},
                                Password: { required: !0, minlength: 5 },
                                PasswordRepeat: { required: !0,minlength: 5, equalTo:"#Password" },
                                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() });

        
    }

    editView(userId){
        this._contactService.getContact(
            userId,undefined,undefined,undefined,undefined,
            undefined,undefined,undefined,undefined,undefined,
            undefined,undefined,undefined,undefined,undefined,
            undefined, undefined, undefined, undefined, undefined
        ).subscribe((result) => {
            // this.contact.firstName = result.items[0]['user']['name'];
            // this.contact.lastName = result.items[0]['user']['surname'];
            this.contact.userId = result.items[0]['user']['id'];
            this.contact.addressId = result.items[0]['address']['id'];

            this.fName = result.items[0]['user']['name'];
            this.sName = result.items[0]['user']['surname'];
            this.emailAddress = result.items[0]['user']['emailAddress'];
            this.pNumber = result.items[0]['user']['phoneNumber'];
            this.vendor.userName = result.items[0]['user']['userName'];
            this.vendor.id = result.items[0]['user']['id'];

            this.address.addressLine1 = result.items[0]['address']['addressLine1'];
            this.address.addressLine2 = result.items[0]['address']['addressLine2'];
            this.address.id = result.items[0]['address']['id'];
            this.address.postalCodeId = result.items[0]['address']['postalCode']['id'];
            this.selectedCountry = result.items[0]['address']['postalCode']['country'];
            this.selectedPostalCode = result.items[0]['address']['postalCode']['value'];
            this.selectedState = result.items[0]['address']['postalCode']['state'];
            this.selectedCity = result.items[0]['address']['postalCode']['city'];
            this.address.addressTypeId = result.items[0]['address']['addressType']  === undefined? 0 : result.items[0]['address']['addressType']['id'];

            
            // console.log(this.selectedPostalCode)
            // this.filterCountries(this.selectedPostalCode)
            
            result.items[0]['address']['addressType']  === undefined? this.selectedAddressType = '' : this.selectedAddressType= result.items[0]['address']['addressType']['name'];

            // this.defaultState =  result.items[0]['address']['postalCode']['state'];
            // this.defaultCity =  result.items[0]['address']['postalCode']['city'];
            // this.defaultCountry =  result.items[0]['address']['postalCode']['state'];
            // this.defaultPostal =  result.items[0]['address']['postalCode']['value'];

            // this.defaultAddressType = result.items[0]['address']['addressType']['id'];

           result.items[0]['address']['addressType'] === undefined? this.defaultAddressType = 'null' : this.defaultAddressType= result.items[0]['address']['addressType']['id'];
        });
    }

    save(): void {
        let input = new CreateOrUpdateContactUserInput()
        this.saving = true;
        console.log(this.id);
        input.user = this.vendor;
        input.user.name = this.contactForm.fName;
        input.user.surname = this.contactForm.sName;
        input.user.emailAddress = this.contactForm.emailAddress;
        input.user.phoneNumber = this.contactForm.pNumber;
        input.user.isActive = this.isActive;
        this.contact.firstName = this.contactForm.fName;
        this.contact.lastName = this.contactForm.sName;
        this.contact.id = this.id;
        this.address.postalCodeId = Number((<HTMLInputElement>document.getElementById('postalSelectInput')).value);
        this.address.addressTypeId = Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value);
        this._contactService.updateContact(
            this.contact
        ).pipe(finalize(() => { this.saving = false; }))
        .subscribe(result => {
            this._vendorService.createOrUpdateVendor(input).subscribe(result => {
                this._addressService.updateAddress(this.address).subscribe(result => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.router.navigate(['/app/sprintship/vendors']);
                });
            });
            });
    }


    // filterPostal(maxCount): void {
    //     this._postalCodeService.getPostalCode(
    //         undefined,
    //         undefined,
    //         undefined,
    //         maxCount,
    //         undefined
    //     ).subscribe(result => {
    //         this.filteredPostal = result.items;
    //     });
    //   }
  
      filterCountries(postalCode): void {
        this._postalCodeService.getDistinctCountry(
            postalCode,
            undefined
        ).subscribe(result => {
            this.selectedCountry = result.items[0]['country'];
            
            console.log(this.selectedCountry)
        });
      }
  
    //   filterCities(maxCount): void {
    //     this._cityService.getCity(
    //         undefined,
    //         undefined,
    //         undefined,
    //         maxCount,
    //         undefined
    //     ).subscribe(result => {
    //         this.filteredCities = result.items;
    //     });
    //   }
  
    //   filterStates(maxCount): void {
    //     this._stateService.getState(
    //         undefined,
    //         undefined,
    //         undefined,
    //         maxCount,
    //         undefined
    //     ).subscribe(result => {
    //         this.filteredStates = result.items;
    //     });
    //   }   


      filterAddressTypes(maxCount): void {
        this._addressTypeService.getAddressType(
            undefined,
            undefined,
            undefined,
            maxCount,
            undefined
        ).subscribe(result => {
            this.filteredAddressType = 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,
        });
        function validateEmail(sEmail) {
            var filter =/^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
            if (filter.test(sEmail)) {
            return true;
            }
            else {
            return false;
            }
        }
        // Validation before going to next page
        wizard.on('beforeNext', function (wizardObj) {
            if (wizardObj.currentStep == 1) {
                if ($('#Name').val() == ''
                    || ($('#Surname').val() == '')
                    // || ($('#PhoneNumber').val() == ''||  $('#minutesPerStopInput').val()==0) 
                    || $('#EmailAddress').val() == ''
                    || $('#UserName').val() == ''
                    || $('#Password').val() == ''
                    || $('#PasswordRepeat').val() == ''
                ) {
                    wizardObj.stop();  // don't go to the next step
                }
                if(!validateEmail($('#EmailAddress').val())){
                    wizardObj.stop(); 
                }
            } else if (wizardObj.currentStep == 2) {
                if ($('#address1Input').val() == ''
                    || ($('#countrySelectInput').val() == null || $('#countrySelectInput').val() == 0)
                    || ($('#postalSelectInput').val() == null || $('#postalSelectInput').val() == 0)
                    || ($('#stateSelectInput').val() == null || $('#stateSelectInput').val() == 0)
                    || ($('#citySelectInput').val() == null || $('#citySelectInput').val() == 0)
                    // || ($('#addressTypeSelectInput').val() == null || $('#addressTypeSelectInput').val() == 0)
                ) {
                    wizardObj.stop();  // don't go to the next step
                }
                
            }
        });
        // 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();
}
}