import React, { useState } from 'react'; import { StyleSheet, TouchableOpacity, Modal, Platform, View } from 'react-native'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; import DateTimePicker from '@react-native-community/datetimepicker'; import { LinearGradient } from 'expo-linear-gradient'; import axios from 'axios'; const API_KEY = process.env.EXPO_PUBLIC_API_KEY; const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; interface ChangeDateDrawerProps { isVisible: boolean; onClose: () => void; onDateChange: (date: Date) => void; currentDate: Date; } export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, currentDate }: ChangeDateDrawerProps) { const [date, setDate] = useState(currentDate); const handleDateChange = (event: any, selectedDate?: Date) => { const currentDate = selectedDate || date; setDate(currentDate); }; const handleTimeChange = (event: any, selectedTime?: Date) => { const currentTime = selectedTime || date; setDate(currentTime); }; const handleSave = async () => { try { await axios.post(`${BASE_URL}/setCountdown`, null, { params: { apiKey: API_KEY, countdown: date.toISOString() } }); onDateChange(date); onClose(); } catch (error) { console.error('Failed to update countdown date:', error); // You might want to show an error message to the user here } }; return ( Set New Countdown Date & Time Save Cancel ); } const styles = StyleSheet.create({ centeredView: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0)', }, modalView: { margin: 10, backgroundColor: 'transparent', padding: 35, borderRadius: 40, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5 }, buttonContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', margin: 'auto', marginBottom: 20, backgroundColor: 'transparent', }, dateContainer: { width: '50%', justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', marginRight: 10, minWidth: 120, }, timeContainer: { width: '50%', justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', minWidth: 120, }, button: { backgroundColor: '#730FF8', borderRadius: 12, padding: 12, elevation: 2, marginVertical: 10, minWidth: 120, marginHorizontal: 10, }, cancelButton: { backgroundColor: '#FF3B30', }, buttonText: { color: 'white', fontSize: 20, fontWeight: 'bold', textAlign: 'center', }, modalText: { marginBottom: 20, textAlign: 'center', fontWeight: 'bold', fontSize: 24, lineHeight: 32, }, dateText: { marginVertical: 10, fontSize: 16, }, });