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/setup-test-account.component.html'
})
export class SetupTestAccountComponent implements AfterViewInit, OnInit {

    testAccountForm: FormGroup;

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

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

    setupTestAccountForm(): void {
        this.testAccountForm = this.fb.group({
            'accountNumber': ['', [Validators.required]],
            'licenseeFirstName': ['', [Validators.required]],
            'licenseeLastName': ['', [Validators.required]],
            'username': ['', [Validators.required, Validators.minLength(8)]],
            'password': ['', [Validators.required, Validators.minLength(8)]],
            '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,}))$/)])],
            'accountType': ['', [Validators.required]],
            'edition': ['', [Validators.required]],
            'subscriptionStartDate': ['', [Validators.required]],
            'subscriptionEndDate': ['', [Validators.required]],
            'address': ['', [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.testAccountForm.valueChanges
            .subscribe(data => this.onValueChanged(data));

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

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

        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 = {
        'accountNumber': '',
        'licenseeFirstName': '',
        'licenseeLastName': '',
        'username': '',
        'password': '',
        'emailId': '',
        'accountType': '',
        'edition': '',
        'subscriptionStartDate': '',
        'subscriptionEndDate': '',
        'address': '',
        'city': '',
        'zip': '',
        'state': '',
        'country': '',
        'phone': ''
    };

    validationMessages = {
        'accountNumber': {
            'required': 'AccountNumber is required.'
        },
        'licenseeFirstName': {
            'required': 'LicenseeFirstName is required.'
        },
        'licenseeLastName': {
            'required': 'LicenseeLastName is required.'
        },
        'username': {
            'required': 'Username is required.',
            'minLength': 'Username must be 8 characters long.'
        },
        'password': {
            'required': 'Password is required.',
            'minLength': 'Password must be 8 characters long.'
        },
        'emailId': {
            'required': 'EmailId is required.',
            'pattern': 'Email pattern is not valid.'
        },
        'accountType': {
            'required': 'AccountType is required.'
        },
        'edition': {
            'required': 'Edition is required.'
        },
        'subscriptionStartDate': {
            'required': 'SubscriptionStartDate is required.'
        },
        'subscriptionEndDate': {
            'required': 'SubscriptionEndDate is required.'
        },
        'address': {
            'required': 'Address 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 is required.'
        },
        'phone': {
            'required': 'Phone is required.',
            'pattern': 'Not a valid US pattern.'
        }
    };
}