klatab/common/FilterModal.tsx

import React, { useState, useEffect } from 'react';
import { Modal, View, StyleSheet, Text } from 'react-native';
import { useColors } from '../common/colors';
import { ThemeButton, ThemeText } from '../common/ThemeTypes';
import { Picker } from '@react-native-picker/picker';
import { FontAwesome } from '@expo/vector-icons';
import { Colors } from 'react-native/Libraries/NewAppScreen';
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({
        container: {
          flexDirection: 'row',
          justifyContent: 'flex-end',
          alignItems: 'center',
          paddingRight: 10,
          gap: 10,
        },
        modalContainer: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: 22,
        },
        modalView: {
          margin: 20,
          backgroundColor: colors.backSecondary,
          borderRadius: 20,
          width: '80%',
          shadowColor: '#000',
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.25,
          shadowRadius: 4,
          elevation: 5,
          borderWidth: 5,
          borderColor: colors.backSecondary,
          padding: 20,
        },
        modalTitle: {
          fontWeight: 'bold',
          fontSize: 20,
        },
        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>
                    <Picker
                        style={styles.picker}
                        selectedValue={tempFilter.type??""}
                        onValueChange={(itemValue, itemIndex) => {
                            setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }))
                        }}
                    >
                        {Object.keys(baseData).map((item) => (
                            <Picker.Item key={item} label={categories[item]} value={item} />
                        ))}
                    </Picker>
                    {tempFilter.type &&
                        <View>
                            <ThemeText style={styles.modalSubtitle}>Suchbegriff</ThemeText>
                            <Picker
                                style={styles.picker}
                                selectedValue={tempFilter.value??""}
                                onValueChange={(itemValue, itemIndex) => {
                                    setTempFilter(prevState => ({ ...prevState, value: itemValue }))
                                }}
                            >
                                <Picker.Item label="Bitte wählen" value="" />
                                {baseData[tempFilter.type].map((item) => (
                                    <Picker.Item key={item.id} label={item.name} value={item.id} />
                                ))}
                            </Picker>
                        </View>
                    }
                    <View>
                        <ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
                        <Picker
                            style={tempFilter.type === "class" ? styles.picker : styles.pickerDisabled}
                            enabled={tempFilter.type === "class"}
                            selectedValue={tempFilter.group??1}
                            onValueChange={(itemValue, itemIndex) => {
                                setTempFilter(prevState => ({ ...prevState, group: itemValue }))
                            }}
                        >
                            <Picker.Item label="1" value="1" />
                            <Picker.Item label="2" value="2" />
                        </Picker>
                    </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;