fuse_expo/components/ChangeDateDrawer.tsx

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 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 [showDatePicker, setShowDatePicker] = useState(false);
  const [showTimePicker, setShowTimePicker] = useState(false);

  const handleDateChange = (event: any, selectedDate?: Date) => {
    const currentDate = selectedDate || date;
    setShowDatePicker(Platform.OS === 'ios');
    setDate(currentDate);
  };

  const handleTimeChange = (event: any, selectedTime?: Date) => {
    const currentTime = selectedTime || date;
    setShowTimePicker(Platform.OS === 'ios');
    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 (
    <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
      onRequestClose={onClose}
    >
      <ThemedView style={styles.centeredView}>
        <ThemedView style={styles.modalView}>
          <ThemedText style={styles.modalText}>Set New Countdown Date and Time</ThemedText>
          
          <TouchableOpacity style={styles.button} onPress={() => setShowDatePicker(true)}>
            <ThemedText style={styles.buttonText}>Select Date</ThemedText>
          </TouchableOpacity>
          
          <TouchableOpacity style={styles.button} onPress={() => setShowTimePicker(true)}>
            <ThemedText style={styles.buttonText}>Select Time</ThemedText>
          </TouchableOpacity>
          
          {showDatePicker && (
            <DateTimePicker
              testID="datePicker"
              value={date}
              mode="date"
              is24Hour={true}
              display="default"
              onChange={handleDateChange}
            />
          )}
          
          {showTimePicker && (
            <DateTimePicker
              testID="timePicker"
              value={date}
              mode="time"
              is24Hour={true}
              display="default"
              onChange={handleTimeChange}
            />
          )}
          
          <ThemedText style={styles.dateText}>
            Selected: {date.toLocaleString()}
          </ThemedText>
          
          <TouchableOpacity style={styles.button} onPress={handleSave}>
            <ThemedText style={styles.buttonText}>Save</ThemedText>
          </TouchableOpacity>
          
          <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
            <ThemedText style={styles.buttonText}>Cancel</ThemedText>
          </TouchableOpacity>
        </ThemedView>
      </ThemedView>
    </Modal>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'black',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    backgroundColor: '#2196F3',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
    marginVertical: 10,
    minWidth: 120,
  },
  cancelButton: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 18,
  },
  dateText: {
    marginVertical: 10,
    fontSize: 16,
  },
});