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-user-id.component.html'
})
export class ChangeUserIdComponent implements AfterViewInit, OnInit {

    changeUserIdForm: 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.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.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.'
        }
    }
}