export const FormField = {
    name: 'FormField',
    props: {
        field: {
            type: Object,
            required: true,
            validator: (field) => {
                return field.name && field.type;
            }
        },
        fieldId: {
            type: String,
            required: true
        },
        modelValue: {
            default: null
        }
    },
    emits: ['update:modelValue'],
    computed: {
        value: {
            get() {
                // Gebruik default waarde als modelValue undefined is
                if (this.modelValue === undefined || this.modelValue === null) {
                    if (this.field.type === 'boolean') {
                        return this.field.default === true;
                    }
                    return this.field.default !== undefined ? this.field.default : '';
                }
                return this.modelValue;
            },
            set(value) {
                this.$emit('update:modelValue', value);
            }
        },
        fieldType() {
            // Map Python types naar HTML input types
            const typeMap = {
                'str': 'text',
                'string': 'text',
                'int': 'number',
                'integer': 'number',
                'float': 'number',
                'text': 'textarea',
                'enum': 'select',
                'boolean': 'checkbox'
            };
            return typeMap[this.field.type] || this.field.type;
        },
        stepValue() {
            return this.field.type === 'float' ? 'any' : 1;
        },
        description() {
            return this.field.description || '';
        }
    },
    methods: {
        handleFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                this.value = file;
            }
        }
    },
    template: `
        <div class="form-field" style="margin-bottom: 15px; display: grid; grid-template-columns: 35% 65%; align-items: center;">
            <!-- Label voor alle velden behalve boolean/checkbox die een speciale behandeling krijgen -->
            <label v-if="fieldType !== 'checkbox'" :for="fieldId" style="margin-right: 10px; font-weight: 500;">
                {{ field.name }}
                <span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
            </label>

            <!-- Container voor input velden -->
            <div style="width: 100%;">
                <!-- Tekstinvoer (string/str) -->
                <input 
                    v-if="fieldType === 'text'"
                    :id="fieldId"
                    type="text"
                    v-model="value"
                    :required="field.required"
                    :placeholder="field.placeholder || ''"
                    :title="description"
                    style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
                >

                <!-- Numerieke invoer (int/float) -->
                <input 
                    v-if="fieldType === 'number'"
                    :id="fieldId"
                    type="number"
                    v-model.number="value"
                    :required="field.required"
                    :step="stepValue"
                    :placeholder="field.placeholder || ''"
                    :title="description"
                    style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
                >

                <!-- Tekstvlak (text) -->
                <textarea 
                    v-if="fieldType === 'textarea'"
                    :id="fieldId"
                    v-model="value"
                    :required="field.required"
                    :rows="field.rows || 3"
                    :placeholder="field.placeholder || ''"
                    :title="description"
                    style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; resize: vertical; box-sizing: border-box;"
                ></textarea>

                <!-- Dropdown (enum) -->
                <select 
                    v-if="fieldType === 'select'"
                    :id="fieldId"
                    v-model="value"
                    :required="field.required"
                    :title="description"
                    style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; background-color: white; box-sizing: border-box;"
                >
                    <option v-if="!field.required" value="">Selecteer een optie</option>
                    <option 
                        v-for="option in (field.allowedValues || field.allowed_values || [])" 
                        :key="option"
                        :value="option"
                    >
                        {{ option }}
                    </option>
                </select>
                <!-- Debug info voor select field -->
                <div v-if="fieldType === 'select' && (!(field.allowedValues || field.allowed_values) || (field.allowedValues || field.allowed_values).length === 0)" 
                     style="color: #d93025; font-size: 0.85em; margin-top: 4px;">
                    Geen opties beschikbaar voor dit veld.
                </div>
            </div>

            <!-- Toggle switch voor boolean velden, met speciale layout voor deze velden -->
            <div v-if="fieldType === 'checkbox'" style="grid-column: 1 / span 2; display: flex; align-items: center;">
                <div class="toggle-switch" style="position: relative; display: inline-block; width: 50px; height: 24px;">
                    <input 
                        :id="fieldId"
                        type="checkbox"
                        v-model="value"
                        :required="field.required"
                        :title="description"
                        style="opacity: 0; width: 0; height: 0;"
                    >
                    <span 
                        class="toggle-slider" 
                        style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px;"
                        :style="{ backgroundColor: value ? '#4CAF50' : '#ccc' }"
                        @click="value = !value"
                    >
                        <span 
                            class="toggle-knob" 
                            style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%;"
                            :style="{ transform: value ? 'translateX(26px)' : 'translateX(0)' }"
                        ></span>
                    </span>
                </div>
                <label :for="fieldId" class="checkbox-label" style="margin-left: 10px; cursor: pointer;">
                    {{ field.name }}
                    <span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
                    <span class="checkbox-description" style="display: block; font-size: 0.85em; color: #666;">
                        {{ field.description || '' }}
                    </span>
                </label>
            </div>
        </div>
    `
};