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

    addUserForm: FormGroup;

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

    }

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

        jQuery(function () {
            jQuery('#datetimepicker1, #datetimepicker2').datetimepicker({
                //language: 'pt-BR'
            });
        });
    }

    initializeUIElements(): void {



    }

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

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

    initializeAddUserForm(): void {
        this.addUserForm = this.fb.group({
            'username': ['', [Validators.required]],
            'password': ['', ([Validators.required, Validators.minLength(8)])],
            'confirmPassword': ['', [Validators.required]],
            'emailId': ['', 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,}))$/)])],
            'firstName': ['', [Validators.required]],
            'lastName': ['', [Validators.required]],
            'accountNumber': ['', [Validators.required]],
            'userType': ['', [Validators.required]],
            'productEdition': ['', [Validators.required]]
        });

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

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

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

        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 = {
        'username': '',
        'password': '',
        'confirmPassword': '',
        'emailId': '',
        'firstName': '',
        'lastName': '',
        'accountNumber': '',
        'userType': '',
        'productEdition': ''
    };

    validationMessages = {
        'username': {
            'required': 'Username is required.'
        },
        'password': {
            'required': 'Password is required.',
            'minlength': 'Password must be at least 8 characters long.'
        },
        'confirmPassword': {
            'required': 'Confirm password is required.'
        },
        'emailId': {
            'required': 'EmailId is required.',
            'pattern': 'Email pattern is not valid.'
        },
        'firstName': {
            'required': 'First name is required.'
        },
        'lastName': {
            'required': 'Last name is required.'
        },
        'accountNumber': {
            'required': 'Account number is required.'
        },
        'userType': {
            'required': 'User type is required.'
        },
        'productEdition': {
            'required': 'Product edition is required.'
        },
    }
}