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

declare var jQuery: any;

@Component({
    templateUrl: './app/components/change-password.component.html'
})
export class ChangePasswordComponent implements AfterViewInit, OnInit {

    changePasswordForm: FormGroup;

    constructor(private application: ApplicationService, private router: Router, private fb: FormBuilder) {

    }

    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']);
        }*/
        this.initializeChangePasswordComponent();
    }

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

    initializeChangePasswordComponent(): void {
        this.changePasswordForm = this.fb.group({
            'userId': ['', [Validators.required]],
            'oldPassword': ['', [Validators.required]],
            'newPassword': ['', [Validators.required, Validators.minLength(8)]],
            'confirmPassword': ['', [Validators.required]]
        });

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

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

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

        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 = {
        'userId': '',
        'oldPassword': '',
        'newPassword': '',
        'confirmPassword': ''
    };

    validationMessages = {
        'userId': {
            'required': 'Userid is required.'
        },
        'oldPassword': {
            'required': 'Old password is required.'
        },
        'newPassword': {
            'required': 'New password is required.',
            'minlength': 'New password must be at least 8 characters long.'
        },
        'confirmPassword': {
            'required': 'Confirm password is required.'
        }
    }
}