<template>
    <div class="input_holder">
        <div class="input_header" v-if="label">
            <label :for="name">{{ label }}</label>
        </div>
        <div class="input_description" v-if="description">{{ description }}</div>
        <input type="text" v-if="type == 'text'"
            v-model="currentValue"
            :name="name"
            :placeholder="placeholder"
            @blur="validate()"
            @change="() => $emit('change', currentValue)"
            :class="{invalid}"
        >
        <input type="password" v-else-if="type == 'password'"
            v-model="currentValue"
            :name="name"
            :placeholder="placeholder"
            @blur="validate()"
            @change="() => $emit('change', currentValue)"
            :class="{invalid}"
        >
    </div>
</template>


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


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