<script setup>
import TextEditor from "../../../../../../Views/Components/TextEditor.vue";

// Generische, schema-getriebene Eingabefelder eines Zahlungsmoduls. Wiederverwendbar für künftige
// Verfahren (SEPA, PayPal): das jeweilige Modul liefert das Schema, hier wird nur gerendert.
const props = defineProps({
    // [{ name, label, type, required }] -- z.B. aus participantOptionsSchema einer Zahlungsmethode.
    schema: {type: Array, default: () => []},
    // v-model: Objekt { optionName: value }
    modelValue: {type: Object, default: () => ({})},
})
const emit = defineEmits(['update:modelValue'])

function setValue(name, value) {
    emit('update:modelValue', {...props.modelValue, [name]: value})
}
</script>

<template>
    <table class="form-table">
        <tr v-for="option in schema" :key="option.name">
            <td>
                {{ option.label }}<span v-if="option.required" class="required-marker">*</span>:
            </td>
            <td>
                <TextEditor
                    v-if="option.type === 'richtext'"
                    :modelValue="modelValue[option.name] ?? ''"
                    @update:modelValue="value => setValue(option.name, value)"
                />
                <input
                    v-else-if="option.type === 'checkbox'"
                    type="checkbox"
                    :checked="modelValue[option.name] ?? false"
                    @change="event => setValue(option.name, event.target.checked)"
                />
                <input
                    v-else
                    type="text"
                    :value="modelValue[option.name] ?? ''"
                    @input="event => setValue(option.name, event.target.value)"
                />
            </td>
        </tr>
    </table>
</template>

<style scoped>
.required-marker {
    color: #ef4444;
    margin-left: 2px;
}
</style>
