<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>

        <!--  -->
        <input type="text" v-if="props && props.type == 'text'"
            v-model="currentValue"
            :class="{invalid}"
            :id="name"
            :name="name"
            :placeholder="props.placeholder"
            @blur="validate"
            @change="handleChange"
        >
        <input type="password" v-else-if="props && props.type == 'password'"
            v-model="currentValue"
            :class="{invalid}"
            :id="name"
            :name="name"
            :placeholder="props.placeholder"
            @blur="validate"
            @change="handleChange"
        >
        <div class="checkbox_holder" v-else-if="props && props.type == 'checkbox'">
            <label :for="name"></label>
            <input type="checkbox"
                v-model="currentValue"
                :id="name"
                :name="name"
                @change="handleChange"
            >
            <div class="check_checkbox"></div>
        </div>

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

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

<script>
export default {
    name: "BasicInput",
    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>