<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="number" v-if="props && props.type == 'number'"
            v-model="currentValue"
            :class="{invalid}"
            :id="name"
            :name="name"
            :placeholder="props.placeholder"
            @blur="validateValue"
            @change="handleChange"
        >
        <input type="text" v-if="props && props.type == 'text'"
            v-model="currentValue"
            :class="{invalid}"
            :id="name"
            :name="name"
            :placeholder="props.placeholder"
            @blur="validateValue"
            @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="validateValue"
            @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"
                @blur="validateValue"
                @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',
        'validate'
    ],
    data() {
        return {
            currentValue: this.value,
            invalid: false,
            validatorMessage: ""
        }
    },
    methods: {
        validateValue() {
            var valid = true;
            let v = this.validate;
            if (v) {
                if (v.required && !this.currentValue) {
                    valid = false;
                    this.validatorMessage = (typeof v.requiredMessage == "string") ? v.requiredMessage : "input required";
                }
            }
            this.invalid = !valid;
            this.$emit('validate', valid);
        },
        handleChange() {
            this.$emit('change', this.currentValue);
        }
    },
    watch: {
        currentValue(val) {
            if (this.props && this.props.datatype) {
                // convert
                let t = this.props.datatype;
                let newVal;
                switch (t) {
                case "int":
                    newVal = parseInt(this.currentValue);
                    if (isNaN(newVal)) {
                        newVal = 0;
                    }
                    break;
                case "float":
                    newVal = parseFloat(this.currentValue);
                    if (isNaN(newVal)) {
                        newVal = 0;
                    }
                    break;
                }

                if (newVal !== this.currentValue) {
                    this.currentValue = newVal;
                    return; // prevent double input events
                }
            }
            this.$emit('input', val);
        }
    }
}
</script>