import { Component, Injector, ViewChild, OnInit, ElementRef, Output, EventEmitter } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { catchError, finalize } from 'rxjs/operators';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
    UserServiceProxy,
    ClinicsServiceProxy,
    GetContactSettingsItemDto,
    ProfileServiceProxy,
    PasswordComplexitySetting,
    BusinessHoursServiceProxy,
    CustomerServiceProxy,
    GetCustomerProfileDto,
    UpdateCustomerProfileInput,
} from "@shared/service-proxies/service-proxies";
import { ILatLng } from '../fleet-management/driver-proximities/driver-proximities.directive';
import { Address } from 'ngx-google-places-autocomplete/objects/address';
import { GooglePlaceDirective } from 'ngx-google-places-autocomplete';
import { AppConsts } from '@shared/AppConsts';

@Component({
    selector: 'EditCustomerProfileModalComponent',
    templateUrl: './edit-customer-profile.component.html',
    styleUrls: ['./customer-portal.component.css']
})
export class EditCustomerProfileModalComponent extends AppComponentBase {

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    @ViewChild('modal', { static: false }) modal: ModalDirective;
    @ViewChild('nameInput', { static: false }) nameInput: ElementRef;
    @ViewChild('placesRef', { static: true }) placesRef: GooglePlaceDirective;
    
    profilePicture = AppConsts.appBaseUrl + '/assets/common/images/default-profile-picture.png';

    // person: CreatePersonInput = new CreatePersonInput();

    active: boolean = false;
    saving: boolean = false;
    activeClinic: boolean;
    performBlindCount: any = 'false'
    isDropOff: any = 'false'
    etaLock: any = 'false'
    ActiveDropdown: any = 'true'

    //Filters
    advancedFiltersAreShown = false;
    filterText = '';
    role = '';
    onlyLockedUsers = false;
    id: any;
    clinicName: any;
    clinicAddress: any;
    clinicAddress2: any;
    city: any;
    postalCode: any;
    country: any;
    state: any;
    contactPerson: any;
    email: any;
    clinicNotes: any;
    billingNotes: any;
    clinicVisibleToDriver: any;
    firstName: any;
    lastName: any;
    phoneNumber: string;
    phoneNumerDisplay: string;
    testnumber: any;

    performBlindCountDisplay: any;
    isDropOffDisplay: any;
    etaLockDisplay: any;
    contactSetting: GetContactSettingsItemDto = new GetContactSettingsItemDto();
    // contactsetting: GetContactSettingsItemDto = new GetContactSettingsItemDto();


    clinicSettingInput: Array<any> = [];
    performBlindCountInput: GetContactSettingsItemDto = new GetContactSettingsItemDto();
    isDropOffInput: GetContactSettingsItemDto = new GetContactSettingsItemDto();
    etaLockInput: GetContactSettingsItemDto = new GetContactSettingsItemDto();

    passwordComplexitySetting: PasswordComplexitySetting = new PasswordComplexitySetting();
    passwordComplexityInfo = '';
    userPasswordRepeat = '';
    passwordhold: any;
    profile: GetCustomerProfileDto = new GetCustomerProfileDto();
    profileInput: UpdateCustomerProfileInput = new UpdateCustomerProfileInput();
    postal_code: any;
    place_id: any
    longitude: any
    latitude: any
    locationId: number
    addressTypeName: string = "";
    formattedAddress: string = "";
    completeAddress: string = "";

    format_address = ""
    addressLine1 = "";
    addressLine2: string;
    street_number = "";
    route = "";
    neighborhood = "";
    sublocality = "";
    place_id_ = ""
    placeExist = true;
    origin: ILatLng = {
        latitude: 38.889931,
        longitude: -77.009003
    };

    constructor(
        injector: Injector,
        private _clinicsServiceProxy: ClinicsServiceProxy,
        private _profileService: ProfileServiceProxy,
        private _customerProfileProxy: CustomerServiceProxy,
        private _businessHoursServiceProxy: BusinessHoursServiceProxy,
        private _profileServiceProxy: ProfileServiceProxy,

    ) {
        super(injector);
    }

    ngOnInit() {
        this.registerEvent();
    }

    show(profile: GetCustomerProfileDto, picture: string): void {
        this.active = true;
        this.modal.show();
        this.profile = profile;
        this.profile.password = null;
        this.profilePicture = 'data:image/jpeg;base64,' + this.profile.profilePicture;
        this._profileService.getPasswordComplexitySetting().subscribe(passwordComplexityResult => {
            this.passwordComplexitySetting = passwordComplexityResult.setting;
            this.setPasswordComplexityInfo();
            this.modal.show();
        });
        this.completeAddress = profile.addressId == null ? null : profile.addressLine1 + ", "
            + profile.city + ", "
            + (profile.state == null ? "" : profile.state + ", ")
            + profile.postalCode + ", "
            + profile.country
        this.latitude = profile.latitude
        this.longitude = profile.longitude
        this.addressTypeName = profile.addressTypeName;
        this.addressLine1 = profile.addressLine1;
        this.addressLine2 = profile.addressLine2;
        this.city = profile.city
        this.country = profile.country
        this.state = profile.state
        this.postal_code = profile.postalCode;
        if(picture!=undefined){
            this.profilePicture = picture;
        }
    }

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

    onShown(): void {
        $('.kt-select2').select2();
        // this.nameInput.nativeElement.focus();
    }

    save(): void {
        this.saving = true;
        this.profileInput.name = this.profile.name;
        this.profileInput.surname = this.profile.surname;
        this.profileInput.email = this.profile.email;
        this.profileInput.phone = this.profile.phone;
        this.profileInput.username = this.profile.username;
        this.profileInput.password = this.profile.password;
        this.profileInput.clinicName = this.profile.clinicName;
        this.profileInput.accountNo = this.profile.accountNo;
        this.profileInput.mondayNote = this.profile.mondayNote;
        this.profileInput.tuesdayNote = this.profile.tuesdayNote;
        this.profileInput.wednesdayNote = this.profile.wednesdayNote;
        this.profileInput.thursdayNote = this.profile.thursdayNote;
        this.profileInput.fridayNote = this.profile.fridayNote;
        this.profileInput.saturdayNote = this.profile.saturdayNote;
        this.profileInput.sundayNote = this.profile.sundayNote;
        this.profileInput.isActive = this.profile.isActive;
        this.profileInput.arrivalAlert = $("#arrivalAlert").val().toString();
        //Address
        this.profileInput.addressLine1 = this.addressLine1;
        this.profileInput.addressLine2 = this.addressLine2;
        this.profileInput.city = this.city
        this.profileInput.country = this.country
        this.profileInput.state = this.state
        this.profileInput.postalCodeValue = this.postal_code
        this.profileInput.latitude = this.latitude
        this.profileInput.longitude = this.longitude
        this.profileInput.formattedAddress = this.completeAddress
        this.profileInput.addressTypeName = this.addressTypeName
        this._customerProfileProxy.updateCustomerProfile(this.profileInput)
            .pipe(finalize(() => { this.saving = false; }))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });

    }

    close(): void {
        this.modal.hide();
        this.active = false;
        this.userPasswordRepeat = '';

    }
    public pickUpAddressChange(address: Address) {
        this.placeExist = true;
        $('#nextStep').removeAttr("disabled");
        this.format_address = address.formatted_address;
        this.addressLine1 = "";
        this.street_number = "";
        this.route = "";
        this.neighborhood = "";
        this.sublocality = "";
        this.place_id = address.place_id;
        let x: ILatLng = {
            longitude: address.geometry.location.lng(),
            latitude: address.geometry.location.lat(),
        }
        this.origin = x;
        for (var data in address.address_components) {
            for (var data2 in address.address_components[data].types) {
                if (address.address_components[data].types[data2] == "postal_code") {
                    this.postal_code = address.address_components[data].long_name;
                }
                if (address.address_components[data].types[data2] == "country") {
                    this.country = address.address_components[data].long_name;
                }
                if (address.address_components[data].types[data2] == "administrative_area_level_1") {
                    this.state = address.address_components[data].long_name;
                }
                if (address.address_components[data].types[data2] == "locality" || address.address_components[data].types[data2] == "postal_town"
                    || address.address_components[data].types[data2] == "administrative_area_level_3") {
                    this.city = address.address_components[data].short_name;
                }
                if (address.address_components[data].types[data2] == "route") {
                    this.route = address.address_components[data].long_name;
                }
                if (address.address_components[data].types[data2] == "street_number") {
                    this.street_number = address.address_components[data].long_name;
                }
                if (address.address_components[data].types[data2] == "neighborhood") {
                    this.neighborhood = address.address_components[data].long_name;
                }
                if (address.address_components[data].types[data2] == "sublocality") {
                    this.sublocality = address.address_components[data].long_name;
                }
            }
        }
        this.street_number = this.street_number == undefined || this.route == "" || this.route == " " ? "" : this.street_number + " ";
        this.route = this.route == undefined || this.route == "" || this.route == " " ? "" : "" + this.route + ", ";
        this.neighborhood = this.neighborhood == undefined || this.neighborhood == "" || this.neighborhood == " " ? "" : "" + this.neighborhood + ", ";
        this.sublocality = this.sublocality == undefined || this.sublocality == "" || this.sublocality == " " ? "" : "" + this.sublocality + ", ";
        this.addressLine1 = this.street_number + this.route + this.sublocality + this.neighborhood;
        this.longitude = address.geometry.location.lng();
        this.latitude = address.geometry.location.lat();
        this.addressTypeName = address.types[0] == null ? "" : address.types[0];
    }

    onSubmitPickup(): void {
        try {
            if (this.placesRef.place.address_components == undefined || this.placesRef.place.address_components == null) {
                this.placeExist = false;
            } else {
                this.placeExist = true;
            }

        } catch (e) {
            this.placeExist = false;
        }
        if (!this.placeExist) {
            $('#nextStep').attr("disabled", "");
        }
    }

    changeProfilePicture(): void {
        abp.event.trigger('app.show.changeProfilePictureModal');
    }

    // getProfilePicture(): void {
    //     this._profileServiceProxy.getProfilePicture().subscribe(result => {
    //         if (result && result.profilePicture) {
    //             this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;
    //         }
    //     });
    // }
    getCustomerProfile(){
        this.spinnerService.show();
        this._customerProfileProxy.getCustomerProfile()
        .pipe(catchError((err, caught): any => {
            this.spinnerService.hide();
        }))
        .subscribe((result: GetCustomerProfileDto) => {
            this.profile = result;
            this.spinnerService.hide();
            console.log(this.profile);
        });
    }

    registerEvent(){
        abp.event.on('profilePictureChanged', () => {
            this.getCustomerProfile();
        });
    }
}