import {
    ChangeDetectionStrategy,
    Component,
    Input,
} from '@angular/core';

import {
    FormControlState,
} from 'ngrx-forms';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'input-with-validation-component',
    templateUrl: './input-with-validation.component.template.pug',
})
export class InputWithValidationComponent {
    @Input()
    public label: string;
    @Input()
    public formControl: FormControlState<string | number>;
    @Input()
    public inputType = 'text';
    @Input()
    public errorMessages: { [key: string]: string };
    @Input()
    public showInvalidMessages = true;
    @Input()
    public additionalInputClasses: string[];
    @Input()
    public maxLength: number;

    public get displayedErrorMessage() {
        return this.showInvalidMessages &&
            this.formControl &&
            this.formControl.errors &&
            this.errorMessages &&
            this.errorMessages[Object.keys(this.formControl.errors)[0]];
    }

    public isCheckbox() {
        return this.inputType === 'checkbox';
    }
}