fonsi_app/components/GenericDropdown.tsx

import { ChevronDown, Search, X } from 'lucide-react-native';
import React, { useState, useEffect, useMemo } from 'react';
import { Modal, FlatList, Text, TextInput, TouchableOpacity, View, Keyboard, KeyboardEvent, Platform } from 'react-native';

interface DropdownOption {
    id: any;
    label: string;
}

interface GenericDropdownProps {
    options: DropdownOption[];
    selectedId: any;
    onSelect: (id: any) => void;
    placeholder?: string;
    searchPlaceholder?: string;
    showSearch?: boolean;
}

export default function GenericDropdown({ 
    options, 
    selectedId, 
    onSelect, 
    placeholder = 'Seleziona un\'opzione...', 
    searchPlaceholder = 'Cerca...',
    showSearch = true 
}: GenericDropdownProps) {
    const [showPicker, setShowPicker] = useState(false);
    const [searchQuery, setSearchQuery] = useState('');
    const [keyboardHeight, setKeyboardHeight] = useState(0);

    // Keyboard height listener
    useEffect(() => {
        const showSubscription = Keyboard.addListener(
            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
            (e: KeyboardEvent) => setKeyboardHeight(e.endCoordinates.height)
        );
        const hideSubscription = Keyboard.addListener(
            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
            () => setKeyboardHeight(0)
        );

        return () => {
            showSubscription.remove();
            hideSubscription.remove();
        };
    }, []);

    // Reset search query every time modal is opened
    useEffect(() => {
        if (showPicker) {
            setSearchQuery('');
        }
    }, [showPicker]);

    const filteredOptions = useMemo(() => {
        if (!showPicker) return [];
        if (!searchQuery.trim()) return options;
        const lowerQuery = searchQuery.toLowerCase();
        return options.filter(o => o.label.toLowerCase().includes(lowerQuery));
    }, [options, searchQuery, showPicker]);

    const selectedLabel = selectedId !== null && selectedId !== undefined
        ? options.find(o => o.id === selectedId)?.label || placeholder
        : placeholder;

    return (
        <View>
            <View className="flex-row items-center gap-3">
                <TouchableOpacity
                    onPress={() => setShowPicker(true)}
                    className="flex-1 flex-row items-center justify-between bg-white px-5 py-4 rounded-2xl border border-gray-200 shadow-sm"
                >
                    <Text className={`font-medium text-base flex-1 mr-2 ${selectedId !== null && selectedId !== undefined ? 'text-gray-800' : 'text-gray-500'}`} numberOfLines={1}>
                        {selectedLabel}
                    </Text>
                    <ChevronDown size={20} color="#6b7280" pointerEvents="none" />
                </TouchableOpacity>

                {selectedId !== null && selectedId !== undefined && (
                    <TouchableOpacity 
                        onPress={() => onSelect(null)}
                        className="bg-gray-50 p-4 rounded-2xl border border-gray-200 shadow-sm justify-center items-center"
                    >
                        <X size={22} color="#4b5563" pointerEvents="none" />
                    </TouchableOpacity>
                )}
            </View>

            <Modal visible={showPicker} transparent={true} animationType="fade" onRequestClose={() => setShowPicker(false)}>
                <TouchableOpacity 
                    activeOpacity={1} 
                    onPress={() => setShowPicker(false)}
                    className="flex-1 bg-black/50 justify-end"
                    style={{ paddingBottom: keyboardHeight }}
                >
                    <View className="bg-white rounded-t-3xl p-5 max-h-[70%]" onStartShouldSetResponder={() => true}>
                        <View className="flex-row justify-between items-center mb-4 border-b border-gray-100 pb-4">
                            <Text className="text-xl font-bold text-gray-800">Seleziona</Text>
                            <TouchableOpacity onPress={() => setShowPicker(false)} className="p-2 bg-gray-100 rounded-full active:bg-gray-200">
                                <X size={20} color="#4b5563" pointerEvents="none" />
                            </TouchableOpacity>
                        </View>

                        {/* Search Bar */}
                        {showSearch && (
                            <View className="bg-gray-100 flex-row items-center px-4 py-3 rounded-2xl mb-4 border border-gray-200 focus:border-[#1071C2]">
                                <Search size={20} color="#9ca3af" />
                                <TextInput 
                                    className="flex-1 ml-3 text-base text-gray-800"
                                    placeholder={searchPlaceholder}
                                    value={searchQuery}
                                    onChangeText={setSearchQuery}
                                    placeholderTextColor="#9ca3af"
                                    autoCorrect={false}
                                />
                                {searchQuery.length > 0 && (
                                    <TouchableOpacity onPress={() => setSearchQuery('')} className="p-1">
                                        <X size={18} color="#6b7280" />
                                    </TouchableOpacity>
                                )}
                            </View>
                        )}

                        <FlatList 
                            showsVerticalScrollIndicator={false} 
                            contentContainerStyle={{ paddingBottom: 30 }} 
                            keyboardShouldPersistTaps="handled"
                            data={filteredOptions}
                            keyExtractor={(item) => String(item.id)}
                            ListHeaderComponent={() => (
                                searchQuery.trim() === '' ? (
                                    <TouchableOpacity 
                                        className={`py-4 px-4 rounded-xl flex-row justify-between items-center mb-2 ${selectedId === null || selectedId === undefined ? 'bg-blue-50' : ''}`}
                                        onPress={() => { onSelect(null); setShowPicker(false); }}
                                    >
                                        <Text className={`text-lg ${selectedId === null || selectedId === undefined ? 'font-bold text-[#1071C2]' : 'text-gray-700'}`}>
                                            Nessuna selezione
                                        </Text>
                                    </TouchableOpacity>
                                ) : null
                            )}
                            ListEmptyComponent={() => (
                                <View className="py-8 items-center">
                                    <Text className="text-gray-500 font-medium text-center">Nessun risultato trovato</Text>
                                </View>
                            )}
                            initialNumToRender={15}
                            maxToRenderPerBatch={20}
                            windowSize={5}
                            removeClippedSubviews={true}
                            renderItem={({ item }) => (
                                <TouchableOpacity 
                                    className={`py-4 px-4 rounded-xl flex-row justify-between items-center mb-2 ${selectedId === item.id ? 'bg-blue-50' : ''}`}
                                    onPress={() => { onSelect(item.id); setShowPicker(false); }}
                                >
                                    <Text className={`text-lg ${selectedId === item.id ? 'font-bold text-[#1071C2]' : 'text-gray-700'}`}>
                                        {item.label}
                                    </Text>
                                </TouchableOpacity>
                            )}
                        />
                    </View>
                </TouchableOpacity>
            </Modal>
        </View>
    );
}