klatab/common/FilterModal.tsx

import React, { useState } from 'react';
import { View, Modal, StyleSheet, Text, ScrollView, Dimensions, Platform } 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 screenHeight = Dimensions.get('window').height;

    const styles = StyleSheet.create({
        modalOverlay: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
        },
        modalView: {
            margin: 20,
            backgroundColor: colors.backSecondary,
            borderRadius: 20,
            width: '80%',
            maxHeight: screenHeight * 0.8,
            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,
        },
        scrollView: {
            flex: 1,
        },
    });

    const renderFilterModal = () => (
        <Modal
            visible={showFilterModal}
            transparent={true}
            onRequestClose={() => setFilter(tempFilter)}
        >
            <View style={styles.modalOverlay}>
                <View style={styles.modalView}>
                    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
                        <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>
                    </ScrollView>
                </View>
            </View>
        </Modal>
    );

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

export default FilterModal;