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

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

import { UUID } from 'angular2-uuid';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'floating-label-input-component',
    styleUrls: [
        './floating-label-input.component.scss',
    ],
    templateUrl: './floating-label-input.component.template.pug',
})
export class FloatingLabelInputComponent implements OnInit {
    @Input()
    public label: string;
    @Input()
    public inputType = 'text';
    @Input()
    public formControl: FormControlState<string | number>;
    @Input()
    public showInvalidMessages: boolean;
    @Input()
    public additionalInputClasses: string[];
    @Input()
    public maxLength: number;

    public inputId: string;

    public ngOnInit() {
        this.inputId = `floating-label-input-${UUID.UUID()}`;
    }

    public get hasValue() {
        return Boolean(this.formControl &&
            this.formControl.value !== undefined &&
            this.formControl.value !== '',
        );
    }

    public get isInvalid() {
        return this.showInvalidMessages && this.formControl.isInvalid;
    }

    public get isTextArea() {
        return this.inputType === 'textarea';
    }

    public get labelElementClasses() {
        return this.inputType === 'textarea'
            ? 'c-floating-label-input-component__textarea-label'
            : 'c-floating-label-input-component__label';
    }
}