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/update-profile.component.html'
})
export class UpdateProfileComponent implements AfterViewInit, OnInit {

    updateProfileForm: FormGroup;

    //updateProfileForm: FormGroup({
    //    firstName: new FormControl(),
    //    lastName: new FormControl(),
    //    email: new FormControl()
    //});

    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.initializeUpdateProfile();
    }

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

    initializeUpdateProfile(): void {
        this.updateProfileForm = this.fb.group({
            'firstName': ['', [Validators.required]],
            'lastName': ['', [Validators.required]],
            'email': ['', Validators.compose([Validators.required, Validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)])],
        });

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

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

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

        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 = {
        'firstName': '',
        'lastName': '',
        'email': ''
    };

    validationMessages = {
        'firstName': {
            'required': 'First name is required.'
        },
        'lastName': {
            'required': 'Last name is required.'
        },
        'email': {
            'required': 'Email is required.',
            'pattern': 'Email pattern is not valid.'
        }
    }
}