<template>
    <div class="form-group">
        <label v-if="label && id" :for="id">{{ label }}</label>
        <slot :cls="{'is-invalid': hasErrors, 'is-valid': valid}" :invalid="hasErrors" :valid="valid"></slot>
        <small v-if="helptext" class="form-text" :id="helpId">{{ helptext }}</small>
        <div v-if="hasErrors" class="invalid-feedback">
            <ul v-if="errorList.length > 1">
                <li v-for="error in errorList">{{ error }}</li>
            </ul>
            <template v-if="errorList.length === 1"> {{ errorList[0] }}</template>
        </div>
        <slot v-if="valid" name="valid"></slot>
    </div>
</template>

<script lang="ts">
    import {Component, Prop} from '@f-list/vue-ts';
    import Vue from 'vue';

    @Component
    export default class FormGroup extends Vue {
        @Prop({required: true})
        readonly field!: string;
        @Prop({required: true})
        readonly errors!: {[key: string]: ReadonlyArray<string> | undefined};
        @Prop
        readonly label?: string;
        @Prop
        readonly id?: string;
        @Prop({default: false})
        readonly valid!: boolean;
        @Prop
        readonly helptext?: string;

        get hasErrors(): boolean {
            return typeof this.errors[this.field] !== 'undefined';
        }

        get errorList(): ReadonlyArray<string> {
            return this.errors[this.field] || []; //tslint:disable-line:strict-boolean-expressions
        }

        get helpId(): string | undefined {
            return this.id !== undefined ? `${this.id}Help` : undefined;
        }

    }
</script>