klatab/common/FilterModal.tsx

import React, { useState } from 'react';
import { Modal, View, StyleSheet, Text } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import { FontAwesome } from '@expo/vector-icons';
import { useColors } from '../common/colors';
import { ThemeButton, ThemeText } from '../common/ThemeTypes';
import { getDefaultFilter } from '../utils/getDefaultFilter';

const categories = { class: 'Klasse', room: 'Raum', teacher: 'Lehrer' };

type FilterModalTypes = {
    filter?: any;
    setFilter?: (date: any) => void;
    userInformation: any;
    baseData: any;
};

const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterModalTypes) => {
    const colors = useColors();
    const [tempFilter, setTempFilter] = useState(filter);
    const [showFilterModal, setShowFilterModal] = useState(false);

    const styles = StyleSheet.create({
        modalContainer: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 22,
        },
        modalView: {
            margin: 20,
            backgroundColor: colors.backSecondary,
            borderRadius: 20,
            width: '80%',
            padding: 20,
            borderWidth: 5,
            borderColor: colors.backSecondary,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.25,
            shadowRadius: 4,
            elevation: 5,
        },
        modalSubtitle: {
            fontSize: 16,
            marginTop: 20,
            marginBottom: 10,
        },
        picker: {
            color: colors.text,
            backgroundColor: colors.backPrimary,
        },
        pickerDisabled: {
            color: colors.backPrimary,
            backgroundColor: colors.backSecondary,
            borderColor: colors.backPrimary,
        },
        modalButtons: {
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginTop: 20,
        },
    });

    const renderFilterModal = () => (
        <Modal
            visible={showFilterModal}
            transparent={true}
            onRequestClose={() => setFilter(tempFilter)}
        >
            <View style={styles.modalContainer}>
                <View style={styles.modalView}>
                    <ThemeText style={styles.modalSubtitle}>Kriterium</ThemeText>
                    <RNPickerSelect
                        style={{
                            inputIOS: styles.picker,
                            inputAndroid: styles.picker,
                        }}
                        value={tempFilter.type ?? ""}
                        onValueChange={(itemValue) => {
                            setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }));
                        }}
                        items={Object.keys(baseData).map(item => ({
                            label: categories[item],
                            value: item,
                        }))}
                        placeholder={{}}
                    />

                    {tempFilter.type && (
                        <View>
                            <ThemeText style={styles.modalSubtitle}>Suchbegriff</ThemeText>
                            <RNPickerSelect
                                style={{
                                    inputIOS: styles.picker,
                                    inputAndroid: styles.picker,
                                }}
                                value={tempFilter.value ?? ""}
                                onValueChange={(itemValue) => {
                                    setTempFilter(prevState => ({ ...prevState, value: itemValue }));
                                }}
                                items={baseData[tempFilter.type].map(item => ({
                                    label: item.name,
                                    value: item.id,
                                }))}
                                placeholder={{}}
                            />
                        </View>
                    )}

                    <View>
                        <ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
                        <RNPickerSelect
                            style={{
                                inputIOS: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
                                inputAndroid: tempFilter.type === "class" ? styles.picker : styles.pickerDisabled,
                            }}
                            value={tempFilter.group ?? "1"}
                            onValueChange={(itemValue) => {
                                setTempFilter(prevState => ({ ...prevState, group: itemValue }));
                            }}
                            disabled={tempFilter.type !== "class"}
                            items={[
                                { label: '1', value: '1' },
                                { label: '2', value: '2' }
                            ]}
                            placeholder={{}}
                        />
                    </View>

                    <View style={styles.modalButtons}>
                        <ThemeButton onPress={() => setTempFilter(getDefaultFilter(userInformation))}>
                            <Text>Zurücksetzen</Text>
                        </ThemeButton>
                        <ThemeButton
                            onPress={() => {
                                setFilter(tempFilter);
                                setShowFilterModal(false);
                            }}
                            disabled={!Boolean(tempFilter.value) || (tempFilter.type === 'class' && !Boolean(tempFilter.value))}
                        >
                            <Text>Anwenden</Text>
                        </ThemeButton>
                    </View>
                </View>
            </View>
        </Modal>
    );

    return (
        <>
            <ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true); }}>
                <FontAwesome name="filter" size={24} />
            </ThemeButton>
            {renderFilterModal()}
        </>
    );
};

export default FilterModal;