// Example
// <input ngControl="title" />
// <show-error control="title"></show-error>

import {Component, Inject, Host, NgFormModel} from 'angular2/angular2';
import {ValidatorsService} from './services/validation/validators.service';

@Component({
    selector: 'show-error',
    properties: ['controlPath: control'],
    template: `<span *ngIf="errorMessage !== null">{{errorMessage}}</span>`
})
export class ShowError {
    controlPath: string;
    constructor(
        @Host() private _formDir: NgFormModel) {
    }

    get errorMessage() {
        var c = this._formDir.form.find(this.controlPath);

        for (let propertyName in c.errors) {
            if (c.errors.hasOwnProperty(propertyName)) {
                if (c.touched) {
                    return ValidatorsService.getValidatorErrorMessage(propertyName);
                }
            }
        }
        return null;
    }
}

// Example Validation Service
export class ValidatorsService {
    static getValidatorErrorMessage(code: string) {
        let config = {
            'required': 'Required',
            'invalidInteger': 'Not valid number',
            'invalidCreditCard': 'Is invalid credit card number',
            'invalidEmailAddress': 'Invalid email address',
            'invalidPassword': 'Invalid password. Password must be at least 6 characters long, and contain a number.'
        };

        return config[code];
    }

    static integerValidator(control) {
        if (!Number.isInteger(parseInt(control.value, 10))) {
            return { 'invalidInteger': true };
        }
    }

    static creditCardValidator(control) {
        // Visa, MasterCard, American Express, Diners Club, Discover, JCB
        if (control.value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/)) {
            return null;
        } else {
            return { 'invalidCreditCard': true };
        }
    }

    static emailValidator(control) {
        // RFC 2822 compliant regex
        if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
            return null;
        } else {
            return { 'invalidEmailAddress': true };
        }
    }

    static passwordValidator(control) {
        // {6,100}           - Assert password is between 6 and 100 characters
        // (?=.*[0-9])       - Assert a string has at least one number
        if (control.value.match(/^(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{6,100}$/)) {
            return null;
        } else {
            return { 'invalidPassword': true };
        }
    }
}

/**
 * original from the angular repo required to pass in list of error messages. New one above looks at the control's own errors and maps to the error messages - Cory
 * This is a component that displays an error message.
 * https://github.com/angular/angular/blob/master/modules/examples/src/model_driven_forms/index.ts
 *
 * For instance,
 *
 * <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
 *
 * Will display the "is required" error if the control is empty, and "invalid credit card" if the
 * control is not empty
 * but not valid.
 *
 * In a real application, this component would receive a service that would map an error code to an
 * actual error message.
 * To make it simple, we are using a simple map here.
 */
//@Component({ selector: 'show-error', properties: ['controlPath: control', 'errorTypes: errors'] })
//@View({
//    template: `
//    <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
//  `,
//    directives: [NgIf]
//})
//class ShowError {
//    formDir;
//    controlPath: string;
//    errorTypes: string[];

//    constructor( @Host() formDir: NgFormModel) { this.formDir = formDir; }

//    get errorMessage() {
//        var c = this.formDir.form.find(this.controlPath);
//        for (var i = 0; i < this.errorTypes.length; ++i) {
//            if (isPresent(c) && c.touched && c.hasError(this.errorTypes[i])) {
//                return this._errorMessage(this.errorTypes[i]);
//            }
//        }
//        return null;
//    }

//    _errorMessage(code) {
//        var config = { 'required': 'is required', 'invalidCreditCard': 'is invalid credit card number' };
//        return config[code];
//    }
//}