Kliko/lib/components/EditModal.tsx

import React, { useEffect, useState } from 'react';
import {
    TextInput,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import Modal from "react-native-modal";

import { Colors } from '@/lib/constants/Colors';
import { ThemedView } from '@/lib/components/ThemedView';
import { ThemedText } from '@/lib/components/ThemedText';
import { useColorScheme } from '@/lib/hooks/useColorScheme';

interface Field {
    name: string;
    title?: string;
    placeholder: string;
    defaultValue?: string;
}

interface EditModalProps {
    title?: string;
    visible: boolean;
    onClose?: () => void;
    onSave: (inputValues: Record<string, string>) => void;
    fields: Field[];
}

const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave, fields }) => {
    const colorScheme = useColorScheme() ?? 'light';
    const [ inputValues, setInputValues ] = useState<Record<string, string>>( {} );

    useEffect( () => {
        const initialValues: Record<string, string> = {};
        fields.forEach( field => {
            if (field.defaultValue) {
                initialValues[ field.name ] = field.defaultValue;
            }
        } );
        setInputValues( initialValues );
    }, [ fields ] );

    const handleInputChange = (name: string, value: string) => {
        setInputValues( { ...inputValues, [ name ]: value } );
    };

    const handleSave = () => {
        onSave( inputValues );
        if (onClose) {
            onClose();
        }
    };

    return (
        <Modal isVisible={visible}>
            <ThemedView style={{ ...styles.view, backgroundColor: Colors[ colorScheme ].background }}>
                <ThemedText style={styles.text}>{title ? title : 'Pas je gegevens aan:'}</ThemedText>

                {fields.map( (field, index) => (
                    <ThemedView key={index} style={styles.inputContainer}>
                        {field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
                        <TextInput
                            style={styles.input}
                            placeholder={field.placeholder}
                            onChangeText={(text) => handleInputChange( field.name, text )}
                            value={inputValues[ field.name ] || ''}
                        />
                    </ThemedView>

                ) )}

                <ThemedView style={styles.buttonContainer}>
                    <TouchableOpacity onPress={onClose || ( () => {
                    } )}>
                        <ThemedText style={[ styles.textStyle, styles.buttonClose ]}>Annuleren</ThemedText>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.buttonSave} onPress={handleSave}>
                        <ThemedText style={styles.textStyle}>Opslaan</ThemedText>
                    </TouchableOpacity>
                </ThemedView>
            </ThemedView>
        </Modal>
    );
};

const styles = StyleSheet.create( {
    view: {
        margin: 25,
        borderRadius: 10,
        paddingTop: 30,
        paddingBottom: 30,
        paddingLeft: 35,
        paddingRight: 35,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
    },
    text: {
        marginBottom: 15,
        textAlign: 'center',
    },
    inputContainer: {
        width: '100%',
        marginBottom: 15,
    },
    inputTitle: {
        fontSize: 16,
        marginBottom: 5,
    },
    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        width: '100%',
        paddingHorizontal: 10,
        borderRadius: 5,
    },
    buttonContainer: {
        marginTop: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
    },
    buttonClose: {
        color: Colors.red,
        paddingTop: 8,
    },
    buttonSave: {
        backgroundColor: Colors.tint,
        borderRadius: 5,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 40,
        paddingRight: 40,
    },
    textStyle: {
        color: 'white',
        fontWeight: 'bold',
        textAlign: 'center',
    },
} );

export default CustomModal;