import { Component, AfterViewInit, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ApplicationService } from '../services/application.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UpdateUserService } from '../services/update-user.service';
import { UserProfile, AdminUser } from '../model/data-model';
//import { EqualValidator } from '../components/shared/equal-validator.directive';

declare var jQuery: any;

@Component({
    templateUrl: '../components/change-user-id.component.html'
})
export class ChangeUserIdComponent implements AfterViewInit, OnInit {
    user: UserProfile;
    admminUser: AdminUser;
    userId: number;
    oldUserId: string;
    newUserId: string;
    confirmUserId: string;

    changeUserIdForm: FormGroup;
    constructor(private application: ApplicationService, private updateService: UpdateUserService, private router: Router, private fb: FormBuilder) {
        this.oldUserId = "";
        this.newUserId = "";
        this.confirmUserId = "";
        this.userId = 0;
    }

    ngAfterViewInit(): void {
        this.initializeUIElements();

        //jQuery(function () {
        //    jQuery("#slider-range-min-2").slider({
        //        range: "min",
        //        min: 1,
        //        max: 60,
        //        value: 10,
        //        slide: function (event, ui) {
        //            jQuery("#amount-2").val(ui.value);
        //        }
        //    });
        //    jQuery("#amount-2").val(jQuery("#slider-vertical-2").slider("value"));
        //});

        //jQuery('.modal').draggable({
        //    handle: '.modal-header'
        //})
    }

    initializeUIElements(): void {



    }

    ngOnInit(): void {
        /*if (this.application.currentUser == null) {
            this.router.navigate(['/login']);
        }*/

        // initialize model here
        //this.user = {
        //    userId: 0,
        //    firstName: '',
        //    lastName: '',
        //    emailId: '',
        //    oldLoginId: '',
        //    newLoginId: '',
        //    confirmLoginId: ''
        //}

        //console.log(this.changeUserIdForm.controls['oldUserId'].value);

        this.initializeChangeUserIdForm();
    }

    showAlert(id: string): void {
        jQuery('#' + id).modal('show');
    }

    initializeChangeUserIdForm(): void {
        this.changeUserIdForm = this.fb.group({
            'oldUserId': ['', [Validators.required]],
            'newUserId': ['', ([Validators.required, Validators.minLength(8)])],
            'confirmUserId': ['', Validators.compose([Validators.required])]
        });

        this.changeUserIdForm.valueChanges
            .subscribe(data => this.onValueChanged(data));

        this.onValueChanged(); // (re)set validation messages now
    }

    onValueChanged(data?: any) {
        if (!this.changeUserIdForm) { return; }
        const form = this.changeUserIdForm;

        for (const field in this.formErrors) {
            // clear previous error message (if any)
            this.formErrors[field] = '';
            const control = form.get(field);

            if (control && control.dirty && !control.valid) {
                const messages = this.validationMessages[field];
                for (const key in control.errors) {
                    this.formErrors[field] += messages[key] + ' ';
                }
            }
        }
    }

    formErrors = {
        'oldUserId': '',
        'newUserId': '',
        'confirmUserId': ''
    };

    validationMessages = {
        'oldUserId': {
            'required': 'Old userid is required.'
        },
        'newUserId': {
            'required': 'New userid is required.',
            'minlength': 'NewUserId must be at least 8 characters long.'

        },
        'confirmUserId': {
            'required': 'Confirm userid is required.',
            'validateEqual': 'New login Id and Confirm login Id must match!'
        }
    }

    save(model: UserProfile, isValid: boolean) {
        // call API to save customer


        console.log(model, isValid);
    }

    getUserDetailsByIdandLoginId(): void { //loginId: string
        console.log('inside getUserDetailsByIdandLoginId');
        let loginId: string;
        loginId = 'superadmin';
        console.log(loginId);
        let userId: number;
        userId = 1;
        this.updateService.GetUserDetailsByIdandLoginId(userId, loginId).subscribe(
            uDetail => this.admminUser = uDetail.json(), err => {
                console.log(err);
            });
    }

    updateUserID(): void { //userId: number, newLoginId: string
        debugger;
        let userId: number;
        userId = 1;
        let newLoginId: string;
        newLoginId = 'superadm';
        console.log('inside change user id component');
        console.log(userId);
        console.log(newLoginId);
        this.updateService.UpdateUserId(userId, newLoginId).subscribe((result) => {
            console.log('Completed');
        });
    }

    //private customValidator(control: Control) {
    //    // check if control is equal to the password1 control
    //    return { isEqual: control.value === this.changeUserIdForm.controls['newUserId'].value };
    //}

}