<template>
    <div class="input_holder">
        <div class="input_header" v-if="label || description">
            <label :for="name" v-if="label">{{ label }}</label>
            <div class="input_description" v-if="description">{{ description }}</div>
        </div>

        <textarea v-model="currentValue"
            :id="name"
            :name="name"
            :class="{invalid}"
            :placeholder="props ? props.placeholder : ''"
            @blur="validate"
            @change="handleChange"
            >
        </textarea>

        <div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
    </div>
</template>


<style scoped>
    .invalid {
        background-color: #fcc;
    }
</style>


<script>
export default {
    name: "TextareaInput",
    props: [
        'description',
        'label',
        'name',
        'props',
        'value',
        'invalid',
        'validatorMessage'
    ],
    data() {
        return {
            currentValue: this.value
        }
    },
    methods: {
        validate() {
            this.$emit('validate', this.currentValue);
        },
        handleChange() {
            this.$emit('change', this.currentValue);
        }
    },
    watch: {
        currentValue(val) {
            this.$emit('input', val);
        }
    }
}
</script>