// static/js/components/FormMessage.js

export const FormMessage = {
    name: 'FormMessage',
    // Static method for direct rendering
    renderComponent(container, props, app) {
        console.log('🔍 [DEBUG] FormMessage.renderComponent() aangeroepen');
        console.log('🔍 [DEBUG] FormMessage container:', container);
        console.log('🔍 [DEBUG] FormMessage props:', props);

        if (!container) {
            console.error('Container element niet gevonden voor FormMessage');
            return null;
        }

        console.log('🔍 [DEBUG] FormMessage container gevonden, Vue app aan het initialiseren');

        try {
            // We controleren het app object
            if (!app) {
                console.error('🚨 [ERROR] Geen Vue app object ontvangen');
                return null;
            }

            // Check of we een correcte Vue app hebben of we moeten er een maken
            if (typeof app.mount !== 'function') {
                console.log('🔍 [DEBUG] Ontvangen app heeft geen mount functie, dit is mogelijk een config object');
                // Controleer of window.Vue beschikbaar is
                if (!window.Vue || typeof window.Vue.createApp !== 'function') {
                    console.error('🚨 [ERROR] window.Vue.createApp is niet beschikbaar');
                    return null;
                }

                // Maak een nieuwe Vue app met het FormMessage component en de props
                console.log('🔍 [DEBUG] Nieuwe Vue app aanmaken met FormMessage component');
                app = window.Vue.createApp(FormMessage, props);
                console.log('🔍 [DEBUG] Nieuwe app aangemaakt:', app);
            }

            // Nu kunnen we de app mounten
            console.log('🔍 [DEBUG] App.mount aanroepen op container');
            const instance = app.mount(container);
            console.log('🔍 [DEBUG] FormMessage component succesvol gemount');
            return instance;
        } catch (error) {
            console.error('🚨 [ERROR] Fout bij mounten FormMessage component:', error);
            console.error('Error stack:', error.stack);
            return null;
        }
    },
    props: {
        formData: {
            type: Object,
            required: true
        },
        formValues: {
            type: Object,
            required: true
        }
    },
    computed: {
        hasFormData() {
            return this.formData && this.formData.fields && Object.keys(this.formData.fields).length > 0;
        },
        formattedFields() {
            if (!this.hasFormData) return [];

            return Object.entries(this.formData.fields).map(([fieldId, field]) => {
                let displayValue = this.formValues[fieldId] || '';

                // Format different field types
                if (field.type === 'boolean') {
                    displayValue = displayValue ? 'Ja' : 'Nee';
                } else if (field.type === 'enum' && !displayValue && field.default) {
                    displayValue = field.default;
                } else if (field.type === 'text') {
                    // Voor tekstgebieden, behoud witruimte
                    // De CSS zal dit tonen met white-space: pre-wrap
                }

                return {
                    id: fieldId,
                    name: field.name,
                    value: displayValue || '-',
                    type: field.type
                };
            });
        }
    },
    template: `
        <div v-if="hasFormData" class="form-message">
            <div v-if="formData.name" class="form-message-header">
                <i v-if="formData.icon" class="material-icons form-message-icon">{{ formData.icon }}</i>
                <span class="form-message-title">{{ formData.name }}</span>
            </div>

            <div class="form-message-fields">
                <div v-for="field in formattedFields" :key="field.id" class="form-message-field">
                    <div class="field-message-label">{{ field.name }}:</div>
                    <div class="field-message-value" :class="{'text-value': field.type === 'text'}">{{ field.value }}</div>
                </div>
            </div>
        </div>
    `
};