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,
    CreateClinicAccountInput,
} 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: 'EditCPersonModalComponent',
    templateUrl: './edit-cperson.component.html',
    styleUrls: ['./customer-portal.component.css']
})
export class EditCPersonModalComponent 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();
    contactPersonInput: CreateClinicAccountInput = new CreateClinicAccountInput();
    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
    };
    userId: number;
    postalCodeCheck : boolean = true
    constructor(
        injector: Injector,
        private _clinicsServiceProxy: ClinicsServiceProxy,
        private _profileService: ProfileServiceProxy,
        private _customerProfileProxy: CustomerServiceProxy,
        private _businessHoursServiceProxy: BusinessHoursServiceProxy,
        private _profileServiceProxy: ProfileServiceProxy,

    ) {
        super(injector);
    }

    ngOnInit() {
        this.registerEvent();
    }

    show(userId?: number): void {
        this.active = true;
        this.userId = userId;
        this.modal.show();
        if(userId==null){
            this.clear()
            this.profile = new GetCustomerProfileDto();
        }else{
            this.spinnerService.show();
            this._customerProfileProxy.getContactPersonForEdit(userId)
            .pipe(catchError((err, caught): any => {
                this.spinnerService.hide();
            }))
            .subscribe((result: GetCustomerProfileDto) => {
                this.profile = result;
                this.spinnerService.hide();
                this.profile.password = null;
                this._profileService.getPasswordComplexitySetting().subscribe(passwordComplexityResult => {
                    this.passwordComplexitySetting = passwordComplexityResult.setting;
                    this.setPasswordComplexityInfo();
                    this.modal.show();
                });
                this.completeAddress = this.profile.addressId == null ? null : this.profile.addressLine1 + ", "
                    + this.profile.city + ", "
                    + (this.profile.state == null ? "" : this.profile.state + ", ")
                    + this.profile.postalCode + ", "
                    + this.profile.country
                this.latitude = this.profile.latitude
                this.longitude = this.profile.longitude
                this.addressTypeName = this.profile.addressTypeName;
                this.addressLine1 = this.profile.addressLine1;
                this.addressLine2 = this.profile.addressLine2;
                this.city = this.profile.city
                this.country = this.profile.country
                this.state = this.profile.state
                this.postal_code = this.profile.postalCode;
                this.spinnerService.hide();
                // if (picture != "") {
                //     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;
        
        if(this.userId==undefined){
            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.password = this.profile.password;
            this.profileInput.username = this.profile.username;
            // 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;
            console.log(this.profileInput);
            this._customerProfileProxy.createContactPerson(this.profileInput)
            .pipe(finalize(() => { this.saving = false; }))
            .pipe(catchError((err, caught): any => {
                this.spinnerService.hide();
            }))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });
        }else{
            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.password = this.profile.password;
            this.profileInput.username = this.profile.username;
            // 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.profileInput.userId = this.userId;
            this.spinnerService.show();
            this._customerProfileProxy.updateContactPerson(this.profileInput)
            .pipe(finalize(() => { this.saving = false; }))
            .pipe(catchError((err, caught): any => {
                this.spinnerService.hide();
            }))
            .subscribe(() => {
                this.spinnerService.hide();
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });
        }
    }

    clear(){

        this.postal_code= null
        this.postalCodeCheck=true
        this.placeExist=true
        this.completeAddress=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;
        
        // console.log(this.postal_code)

        for (var data in address.address_components) {
            for (var data2 in address.address_components[data].types) {
                console.log(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];

        try {
            if (this.postal_code == null || this.postal_code == undefined) {
                this.postalCodeCheck = false
            } else {
                this.postalCodeCheck = true
            }

        } catch (e) {
            this.postalCodeCheck = false
        }
        // console.log(this.postal_code)
    }

    onSubmitPickup(): void {

        this.postal_code=undefined
        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", "");
        }
        if (!this.postalCodeCheck) {
            $('#nextStep').attr("disabled", "");
        }
    }

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

    getProfilePicture(): void {
        console.log("getPIC")
        this._profileServiceProxy.getProfilePicture().subscribe(result => {
            if (result && result.profilePicture) {
                this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;
            }
        });
    }

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