import React, { useState, useEffect } from 'react';
import { Modal, Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
import { Check, X } from 'lucide-react-native';

export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: any) => {
    // Stato locale temporaneo per la selezione nel modale
    const [localRange, setLocalRange] = useState(currentRange);

    // Sincronizza lo stato locale quando il modale si apre
    useEffect(() => {
        if (visible) setLocalRange(currentRange);
    }, [visible, currentRange]);

    return (
        <Modal
            visible={visible}
            transparent={true}
            animationType="fade"
            onRequestClose={onClose}
        >
            <View className="flex-1 bg-black/60 justify-center items-center p-6">
                <View className="bg-white rounded-[2rem] p-6 w-full max-w-sm shadow-2xl">
                    <View className="flex-row justify-between items-center mb-4">
                        <Text className="text-xl font-bold text-gray-800">Seleziona Periodo</Text>
                        <TouchableOpacity onPress={onClose} className="p-2 bg-gray-50 rounded-full">
                            <X size={20} color="#4b5563" />
                        </TouchableOpacity>
                    </View>

                    <DateTimePicker
                        mode="range"
                        locale="it"
                        startDate={localRange.startDate}
                        endDate={localRange.endDate}
                        onChange={(params: any) => setLocalRange(params)}
                        // selectedItemColor="#099499"
                        // headerTextStyle={{ color: '#1f2937', fontWeight: 'bold', fontSize: 18 }}
                        // calendarTextStyle={{ color: '#374151' }}
                        // weekDaysTextStyle={{ color: '#9ca3af', fontWeight: 'bold' }}
                    />

                    <TouchableOpacity
                        onPress={() => {
                            onApply(localRange);
                            onClose();
                        }}
                        className="mt-6 bg-[#099499] rounded-xl py-4 flex-row justify-center items-center active:bg-[#077d82]"
                    >
                        <Check size={20} color="white" className="mr-2" />
                        <Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
};