import { Component, AfterViewInit, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ApplicationService } from '../services/application.service';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

declare var jQuery: any;

@Component({
    templateUrl: './app/components/view-update-profile.component.html'
})
export class ViewUpdateProfileComponent implements AfterViewInit, OnInit {
    viewUpdateProfileForm: FormGroup;

    //viewUpdateProfileForm = new FormGroup({
    //    licenseeFirstName: new FormControl(),
    //    licenseeLastName: new FormControl(),
    //    institutionName: new FormControl(),
    //    address: new FormControl(),
    //    city: new FormControl(),
    //    state: new FormControl(),
    //    country: new FormControl(),
    //    zip: new FormControl(),
    //    phone: new FormControl(),
    //    email: new FormControl(),
    //    subscriptionStartDate: new FormControl(),
    //    subscriptionEndDate: new FormControl(),
    //    subscriptionPrice: new FormControl(),
    //    exportImages: new FormControl(),
    //    userName1: new FormControl(),
    //    password: new FormControl(),
    //    securityQuestion: new FormControl(),
    //    answer: new FormControl()
    //});

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

    }

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

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

        jQuery(function () {
            jQuery('#fixed_hdr2').fxdHdrCol({
                fixedCols: 0,
                width: "100%",
                height: 200,
                colModal: [
                    { width: 180, align: 'center' },
                    { width: 230, align: 'center' },
                    { width: 150, align: 'Center' },
                    { width: 150, align: 'Center' },
                    { width: 350, align: 'Center' },
                    { width: 500, align: 'Center' },
                    { width: 130, align: 'Center' },
                    { width: 120, align: 'center' },
                    { width: 280, align: 'Center' },
                    { width: 180, align: 'center' },
                    { width: 200, align: 'center' },
                    { width: 170, align: 'center' },
                    { width: 80, align: 'center' },
                    { width: 150, align: 'center' },
                    { width: 150, align: 'center' },
                    { width: 180, align: 'Center' },
                    { width: 400, align: 'Center' },
                    { width: 150, align: 'center' },
                    { width: 110, align: 'center' },
                ],
                sort: true
            });
        });
    }

    initializeUIElements(): void {



    }

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

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

    initializeViewUpdateProfileForm(): void {
        this.viewUpdateProfileForm = this.fb.group({
            'licenseeFirstName': ['', [Validators.required]],
            'licenseeLastName': ['', [Validators.required]],
            'institutionName': ['', [Validators.required]],
            'emailId': ['', [Validators.required, Validators.pattern(/^[a-z0-9!#$%&' * +\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i)]],
            'address1': ['', [Validators.required]],
            'address2': ['', [Validators.required]],
            'city': ['', [Validators.required]],
            'zip': ['', Validators.compose([(Validators.required, Validators.pattern(/^\d{5}$/))])],
            'state': ['', [Validators.required]],
            'country': ['', [Validators.required]],
            'phone': ['', Validators.compose([(Validators.required, Validators.pattern(/^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/))])]
        });

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

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

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

        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 = {
        'licenseeFirstName': '',
        'licenseeLastName': '',
        'institutionName': '',
        'emailId': '',
        'address1': '',
        'address2': '',
        'city': '',
        'zip': '',
        'state': '',
        'country': '',
        'phone': ''
    };

    validationMessages = {
        'licenseeFirstName': {
            'required': 'LicenseeFirstName is required.'
        },
        'licenseeLastName': {
            'required': 'LicenseeLastName is required.'
        },
        'institutionName': {
            'required': 'InstitutionName is required.'
        },
        'emailId': {
            'required': 'EmailId is required.',
            'pattern': 'Email pattern is not valid.'
        },
        'address1': {
            'required': 'Address1 is required.'
        },
        'address2': {
            'required': 'Address2 is required.'
        },
        'city': {
            'required': 'City is required.'
        },
        'zip': {
            'required': 'Zip code is required.',
            'pattern': 'Only 5 digited numbers (US zip) are allowed.'
        },
        'state': {
            'required': 'State is required.'
        },
        'country': {
            'required': 'Country name is required.'
        },
        'phone': {
            'required': 'Phone number is required.',
            'pattern': 'Not a valid US pattern.'
        }
    };
}