// static/js/components/FormMessage.js

export const FormMessage = {
    name: 'FormMessage',
    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>
    `
};