<template>
	<div class="row">
		<element-factory
			v-for="element in elements"
			:element="element"
			:values="formValues"
			:key="element.id"
		></element-factory>
	</div>
</template>
<script>
import Factory from "./FactoryPattern";
export default {
	components: {
		"element-factory": Factory
	},
	data: () => ({
	}),
	props: {
		elements: {
		    required: true
		},
		values:{
		    required: false,
		}
	},
	methods: {
		setDefaultValue(elements, values = {}) {
			for (const key in elements) {
				if (elements.hasOwnProperty(key)) {
					if (elements[key].type == "we-form") {
						values[
							elements[key].slug
						] = this.setDefaultValue(elements[key].children);
					} else {
						values[elements[key].slug] = "";
					}
				}
			}
			return values;
		}
	},
	computed: {
		formValues:{
			get() {
				if (!this.values || Object.keys(this.values).length == 0) {
	            	return this.setDefaultValue(this.elements);
				}
				return this.values;
			},
			set(values) {
				this.$emit('values', values);
			}
		}
	},
};
</script>