import { Component, Injector, ViewChild, ViewEncapsulation, ElementRef, Directive, 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 {
    CreateOrUpdateContactUserInput, DriversServiceProxy,
    LocationServiceProxy, CreateLocationInput, UpdateLocationInput,
    UserLocationServiceProxy, CreateUserLocationInput, UpdateUserLocationInput,
    PasswordComplexitySetting, UserRoleDto, UserEditDto, UpdateContactInput,
    UpdateAddressInput, CreateContactInput,
    ContactServiceProxy, AddressTypeServiceProxy, PostalCodeServiceProxy,
    EmailServiceProxy, PhoneServiceProxy, ProfileServiceProxy, AddressServiceProxy
} 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 { colorSets } from '@swimlane/ngx-charts/release/utils';
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-driver.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})
@Directive({
    selector: '[var]',
    exportAs: 'var'
  })
export class EditDriverComponent extends AppComponentBase {
    @ViewChild(ContactFormComponent, { static: false }) contactForm;

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


    @ViewChild("locationSelectInput",{static:false}) locationSelectInput: ElementRef;

    @Input() var:any;

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

    driver: UserEditDto = new UserEditDto();
    contact: UpdateContactInput = new UpdateContactInput();
    address: UpdateAddressInput = new UpdateAddressInput();
    // contactInput: UpdateContactInput = new UpdateContactInput();

    defaultLocation: any;
    selectedLocation: any;
    location: any;
    filteredLocations: any;
    // locationSelectInput: any;

    defaultAddressType: any;
    defaultCountry: any;
    defaultState: any;
    defaultPostal: any;
    defaultCity: any;

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

    fName: string;
    sName : string;
    pNumber: any;
    emailAddress: 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 = '';
    isContact = true;

    constructor(
        injector: Injector,
        private _locationService: LocationServiceProxy,
        private _driverService: DriversServiceProxy,
        private _userLocationService: UserLocationServiceProxy,
        private _contactService: ContactServiceProxy,
        private _addressTypeService: AddressTypeServiceProxy,
        private _postalCodeService: PostalCodeServiceProxy,
        private _profileService: ProfileServiceProxy,
        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({
            placeholder: "Select..",
        });
        this.route.paramMap.subscribe(params => {
            this.id = params.get("id")
        })
        // this.KTWizard2();

        // $( document ).ready(function() {
        //     $('#locationSelectInput').val(['1', '2']);});
        
        // $('#locationSelectInput').select2().val([1,2]).trigger("change")
        // $('#locationSelectInput').select2('val', [1]);

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

        this.selectedCity = $("#locationSelectInput").val();
        $("#locationSelected").text(this.selectedCity);
        $("#locationSelectInput").change(function () {
            this.locationSelected = $("#locationSelectInput option:selected").text();
            $("#locationSelected").text(this.locationSelected);
            // $('#locationSelectInput').val([1, 2]);
        });

        this._profileService.getPasswordComplexitySetting().subscribe(passwordComplexityResult => {
            this.passwordComplexitySetting = passwordComplexityResult.setting;
            this.setPasswordComplexityInfo();
        });
        this._driverService.getDriverForEdit(this.id).subscribe(res => {
            this.driver = res.user;
            this.fName = res.user.name;
            this.sName = res.user.surname;
            this.pNumber = res.user.phoneNumber;
            this.emailAddress = res.user.emailAddress;
            this.driver.userName = res.user.userName;
        });
        this._userLocationService.getUserLocation(undefined, this.id, undefined,
            undefined, undefined, undefined, undefined, undefined, undefined, undefined).subscribe(res2 => {
                let values = [];
                res2.items.forEach(el => {
                    //     $("#locationSelectInput").val(el);
                    // console.log(el);
                    values.push(el.locationId);
                    // console.log(values);
                    //    this.selectedLocation = el.location.name;   
                    //    console.log(this.selectedLocation);            
                });
                this.defaultLocation = values;
                //console.log(this.defaultLocation);
            });
        this._contactService.getContact(
            undefined, this.id, undefined,undefined, undefined, 
            undefined, undefined, undefined, undefined, undefined,
            undefined, undefined, undefined, undefined, undefined,
            undefined, undefined,undefined,undefined,undefined
        ).subscribe((result) => {
            // if (result.items === undefined) {
            //     this.isContact = false;
            // }
            // else {
                this.isContact = true;
                this.contact.id = result.items[0]['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'];
                result.items[0]['address']['addressType'] === undefined ? this.selectedAddressType = '' : this.selectedAddressType = result.items[0]['address']['addressType']['name'];

                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'];
                result.items[0]['address']['addressType'] === undefined ? this.address.addressTypeId = null : this.address.addressTypeId = result.items[0]['address']['addressType']['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.addressType = result.items[0]['address']['addressType']['id'];

                console.log(this.defaultCountry);
            // }

        })

        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 },
                                UserName: { required: !0 },
                                Password: { required: !0, minlength: 5 },
                                PasswordRepeat: { required: !0,minlength: 5, equalTo:"#Password" },
                                locationSelectInput: { 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.filterLocations(maxcount);

        // this.filterPostal(maxcount);

        this.filterAddressTypes(maxcount);
        var that = this;

        // window.setTimeout(function(){
        //     $('#locationSelectInput').val(that.defaultLocation); 
        // },3000);


    }

    trackLocation(index: number, item: any): string{
        // console.log(item.id);
        // if(item.id===1){
        //     return item.id;
        // }else{
        //     return item.name;
        // }
        // if(!item) return null;
        return item.id;
    }

    save(): void {
        this.saving = true;

        let userInput = new CreateOrUpdateContactUserInput({
            user: new UserEditDto({
                id: this.driver.id,
                name: this.contactForm.fName,
                surname: this.contactForm.sName,
                userName: this.driver.userName,
                password: this.driver.password,
                phoneNumber: this.contactForm.pNumber,
                emailAddress: this.contactForm.emailAddress,
                isLockoutEnabled: false,
                isActive: this.isActive,
                isTwoFactorEnabled: this.isTwoFactorEnabled,
                shouldChangePasswordOnNextLogin: false
            }),
            assignedRoleNames: _.map(
                _.filter(this.roles, { isAssigned: true }), role => role.roleName
            ),
            sendActivationEmail: this.sendActivationEmail,
            setRandomPassword: this.setRandomPassword,
            location: $("#locationSelectInput").val()
        });

        // if(Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value) == 0) {
        //     this.address.addressTypeId = null;

        // }
        // else {
        //     this.address.addressTypeId = Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value);                   
        // }

        // this.address.countryId = Number((<HTMLInputElement>document.getElementById('countrySelectInput')).value);
        // this.address.cityId = Number((<HTMLInputElement>document.getElementById('citySelectInput')).value);
        // this.address.stateId = Number((<HTMLInputElement>document.getElementById('stateSelectInput')).value);
        // this.address.postalCodeId = Number((<HTMLInputElement>document.getElementById('postalSelectInput')).value);

        // this.contact.addressId = this.address.id;
        // this.contact.userId = this.driver.id;
        // this.contact.firstName = this.driver.name;
        // this.contact.lastName = this.driver.surname;
            this.saving = true;
            this._driverService.createOrUpdateDriver(userInput)
                .subscribe(
                    success => {
                        console.log(success);
                        this.address.postalCodeId = Number((<HTMLInputElement>document.getElementById('postalSelectInput')).value);
                        this.address.addressLine1 = this.address.addressLine1;
                        if (this.address.addressLine2 == null || this.address.addressLine2 == "") {
                            this.address.addressLine2
                        }
                        this.address.addressLine2 = this.address.addressLine2;
                        if (Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value) == 0) {
                            this.address.addressTypeId = null;
                        }
                        else {
                            this.address.addressTypeId = Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value);
                        }
                        this._addressService.updateAddress(this.address)
                            .subscribe(
                                addressResult => {
                                    // console.log(addressResult);
                                    this.contact.addressId = this.address.id;
                                    console.log(this.address.id +" address");
                                    this.contact.firstName = this.driver.name;
                                    this.contact.lastName = this.driver.surname;
                                    this.contact.userId = success;
                                    console.log(success +" userId");
                                    // console.log(this.contact);
                                    this._contactService.updateContact(this.contact)
                                        .pipe(finalize(() => {
                                            this.saving = false;
                                        }))
                                        .subscribe(() => {
                                            this.notify.info(this.l('SavedSuccessfully'));
                                            this.router.navigate(['/app/sprintship/drivers']);
                                            console.log(this.contact);
                                        });
                                });
                    },
                    error => {
                        this.saving = false;
                    }
                )
        }

    filterLocations(maxcount): void {
        this._locationService.getLocation(
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            maxcount,
            undefined
        ).subscribe(result => {
            let key, key2, arrAny = {}, arrHolder = [];
            for(key in result.items)
            {
                arrAny = {
                    'name': result.items[key].name,
                    'id': result.items[key].id,
                    'selected': false
                };
                for(key2 in this.defaultLocation)
                {
                    if(this.defaultLocation[key2] == result.items[key].id) {
                        arrAny = {
                            'name': result.items[key].name,
                            'id': result.items[key].id,
                            'selected': true
                        };
                    }    
                }
                arrHolder.push(arrAny);
            }
            this.filteredLocations = arrHolder;
            // console.log(arrHolder);
        });
    }

    //   filterPostal(maxCount): void {
    //     this._postalCodeService.getPostalCode(
    //         undefined,
    //         undefined,
    //         undefined,
    //         maxCount,
    //         undefined
    //     ).subscribe(result => {
    //         this.filteredPostal = result.items;
    //     });
    //   } 


    filterAddressTypes(maxCount): void {
        this._addressTypeService.getAddressType(
            undefined,
            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,
            });

            // 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() == ''
                    ) {
                        wizardObj.stop();  // don't go to the next step
                    }
                } else if (wizardObj.currentStep == 2) {
                    if ($('#locationSelectInput').val() == null || $('#locationSelectInput').val() == 0
                        // $('#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)
                        // || ($('#locationSelectInput').val() == null || $('#locationSelectInput').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();
    }
}