<template>

    <input type="email"
           :name="questionName"
           :id="'id_' + question.id"
           v-model="question.answer"
           :placeholder="placeholder"
           @blur="updateQuestion(question)"
           @input="updateQuestion(question, true)"
           autocomplete="off"
           class="assessmentEmailField"
    />

</template>

<script>

import { props, computed, methods } from "../mixins/fields";
import { debounce } from 'lodash';

export default {
    name: "numberField",
    mixins: [props, computed, methods],
    props: {
        placeholder: {
            type: [String],
            default (rawProps) {
                return '';
            }
        },
        allowInputEvent: {
            type: [Boolean],
            default (rawProps) {
                return false;
            }
        }
    },
    methods: {

        updateQuestion: debounce(function(question, inputEvent) {

            if(typeof inputEvent == 'undefined' || this.allowInputEvent) {
                question = this.validate(question);
                this.$emit('update-question', question);
            }

        }, 200),

        validate(question) {

            let canProceed = true;

            if (question.answer.length) {
                let re = /\S+@\S+\.\S+/;
                canProceed = re.test(question.answer);
            }else{
                if(question.is_required) {
                    canProceed = false;
                }
            }

            question.can_proceed = canProceed;

            return question;

        }

    }
}
</script>

<style lang="less">

    .assessmentEmailField {
        border-radius: 59px !important;
    }


</style>
