import React, { useState } from 'react';
import { Alert, 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, onApply }: any) => {
    const defaultStyles = useDefaultStyles();
    const [range, setRange] = useState<{
        startDate: DateType;
        endDate: DateType;
    }>({ startDate: null, endDate: null });

    const clearCalendar = () => {
        setRange({ startDate: null, endDate: null });
        onApply({ startDate: null, endDate: null });
        onClose();
    };

    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"
                        startDate={range.startDate}
                        endDate={range.endDate}
                        onChange={(params) => setRange(params)}
                        timeZone='Europe/Rome'
                        locale='it'
                        styles={{
                            ...defaultStyles,
                            selected: { backgroundColor: '#099499' }
                        }}
                    />

                    <TouchableOpacity
                        onPress={() => {
                            console.log("Data inizio: ", range.startDate?.toLocaleString());
                            console.log("Data fine: ", range.endDate?.toLocaleString());
                            onApply(range);
                            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>
                    <TouchableOpacity
                        onPress={clearCalendar}
                        className="mt-2 bg-gray-200 rounded-xl py-4 flex-row justify-center items-center active:bg-gray-300"
                    >
                        <Text className="text-gray-700 font-bold text-lg ml-2">Reset</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
};