export const FormField = {
    name: 'FormField',
    props: {
        field: {
            type: Object,
            required: true,
            validator: (field) => {
                return field.name && field.type && field.label;
            }
        },
        modelValue: {
            default: ''
        }
    },
    emits: ['update:modelValue'],
    computed: {
        value: {
            get() {
                return this.modelValue;
            },
            set(value) {
                this.$emit('update:modelValue', value);
            }
        }
    },
    methods: {
        handleFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                this.value = file;
            }
        }
    },
    template: `
        <div class="form-field">
            <label>
                {{ field.label }} 
                <span v-if="field.required" class="required">*</span>
            </label>
            
            <!-- Text/Email/Tel inputs -->
            <input 
                v-if="['text', 'email', 'tel', 'url', 'password'].includes(field.type)"
                :type="field.type"
                v-model="value"
                :required="field.required"
                :placeholder="field.placeholder || ''"
                :maxlength="field.maxLength"
                :minlength="field.minLength"
            >
            
            <!-- Number input -->
            <input 
                v-if="field.type === 'number'"
                type="number"
                v-model.number="value"
                :required="field.required"
                :min="field.min"
                :max="field.max"
                :step="field.step || 1"
                :placeholder="field.placeholder || ''"
            >
            
            <!-- Date input -->
            <input 
                v-if="field.type === 'date'"
                type="date"
                v-model="value"
                :required="field.required"
                :min="field.min"
                :max="field.max"
            >
            
            <!-- Time input -->
            <input 
                v-if="field.type === 'time'"
                type="time"
                v-model="value"
                :required="field.required"
            >
            
            <!-- File input -->
            <input 
                v-if="field.type === 'file'"
                type="file"
                @change="handleFileUpload"
                :required="field.required"
                :accept="field.accept"
                :multiple="field.multiple"
            >
            
            <!-- Select dropdown -->
            <select 
                v-if="field.type === 'select'"
                v-model="value"
                :required="field.required"
            >
                <option value="">{{ field.placeholder || 'Kies een optie' }}</option>
                <option 
                    v-for="option in field.options" 
                    :key="option.value || option"
                    :value="option.value || option"
                >
                    {{ option.label || option }}
                </option>
            </select>
            
            <!-- Radio buttons -->
            <div v-if="field.type === 'radio'" class="radio-group">
                <label 
                    v-for="option in field.options"
                    :key="option.value || option"
                    class="radio-label"
                >
                    <input 
                        type="radio"
                        :value="option.value || option"
                        v-model="value"
                        :required="field.required"
                    >
                    <span>{{ option.label || option }}</span>
                </label>
            </div>
            
            <!-- Checkboxes -->
            <div v-if="field.type === 'checkbox'" class="checkbox-group">
                <label 
                    v-for="option in field.options"
                    :key="option.value || option"
                    class="checkbox-label"
                >
                    <input 
                        type="checkbox"
                        :value="option.value || option"
                        v-model="value"
                    >
                    <span>{{ option.label || option }}</span>
                </label>
            </div>
            
            <!-- Single checkbox -->
            <label v-if="field.type === 'single-checkbox'" class="checkbox-label">
                <input 
                    type="checkbox"
                    v-model="value"
                    :required="field.required"
                >
                <span>{{ field.checkboxText || field.label }}</span>
            </label>
            
            <!-- Textarea -->
            <textarea 
                v-if="field.type === 'textarea'"
                v-model="value"
                :required="field.required"
                :rows="field.rows || 3"
                :placeholder="field.placeholder || ''"
                :maxlength="field.maxLength"
            ></textarea>
            
            <!-- Range slider -->
            <div v-if="field.type === 'range'" class="range-field">
                <input 
                    type="range"
                    v-model.number="value"
                    :min="field.min || 0"
                    :max="field.max || 100"
                    :step="field.step || 1"
                >
                <span class="range-value">{{ value }}</span>
            </div>
            
            <!-- Help text -->
            <small v-if="field.helpText" class="help-text">
                {{ field.helpText }}
            </small>
        </div>
    `
};