<template>
    <form @submit.prevent="submit()">
        <div v-for="(e, i) in elements" :key="i">
            <my-input :label="e.label" :type="e.type" v-model="formData[i]" @validate="validateData(i)"></my-input>
            <span class="error" v-if="formErrors[i]">required</span>
        </div>
        <div>
            <button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
        </div>
    </form>
</template>

<script>
import MyInput from './my-input.vue';

export default {
    name: "MyForm",
    components: {
        MyInput
    },
    props: {
        elements: {
            type: Object,
            default: () => {
                return [];
            }
        },
        buttons: {
            type: Array,
            default: () => {
                return [];
            }
        },
        submitHandler: {
            type: Function,
            default: () => {

            }
        }
    },
    data() {
        return {
            formData: {},
            formErrors: {}
        }
    },
    methods: {
        validateData(name) {
            if (this.elements[name].required) {
                if (!this.formData[name]) {
                    this.$set(this.formErrors, name, {
                        error: 'required field'
                    });

                    return false;
                } else {
                    this.$delete(this.formErrors, name);
                }
            }
            return true;
        },
        buttonClick(type) {
            switch(type) {
                case 'submit':
                    this.submit();
                    break;
            }
        },
        submit() {
            let valid = true;
            Object.keys(this.elements).forEach(key => {
                valid = (this.validateData(key) && valid);
            });
            if (valid) {
                this.submitHandler(this.formData);
            }
        }
    }
}
</script>

<style scoped>
    .error {
        color: red;
    }
</style>