wavelength_app/components/home/CountdownChangeDateModal.tsx

import React, { useState } from 'react';
import { StyleSheet, Modal } from 'react-native';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Countdown, User } from '@/constants/Types';
import { setCountdown } from '@/constants/APIs';
import TextButton from '@/components/theme/buttons/TextButton';

type ChangeDateModalProps = {
  user: User;
  isVisible: boolean;
  onClose: () => void;
  onDateChange: (date: Date) => void;
  currentCountdown?: Countdown;
};

const ChangeDateModal = ({
  user, isVisible, onClose, onDateChange, currentCountdown
}: ChangeDateModalProps) => {
  const [date, setDate] = useState(currentCountdown ? new Date(currentCountdown.date) : new Date());

  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 {
      let updatedCountdown: Countdown;
      if (currentCountdown) {
        updatedCountdown = { ...currentCountdown, date: date };
        await setCountdown(user.id, updatedCountdown);
        onDateChange(date);
        onClose();
      }
    } catch (error) {
      console.error('Error saving countdown:', error);
    }
  };

  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
          </ThemedText>
            <ThemedView style={styles.container}>
              <ThemedView style={styles.dateContainer}>
                <DateTimePicker
                  testID="datePicker"
                  value={date}
                  mode="date"
                  is24Hour={true}
                  display="default"
                  onChange={handleDateChange}
                />
              </ThemedView>
              <ThemedView style={styles.timeContainer}>
                <DateTimePicker
                  testID="timePicker"
                  value={date}
                  mode="time"
                  is24Hour={true}
                  display="default"
                  onChange={handleTimeChange}
                />
              </ThemedView>
            </ThemedView>
            <ThemedView style={styles.buttonContainer}>
              <TextButton
                width={120}
                height={60}
                text='Save'
                fontSize={18}
                onPress={handleSave}
              />
              <TextButton
                width={120}
                height={60}
                text='Cancel'
                fontSize={18}
                onPress={onClose}
              />
            </ThemedView>
        </ThemedView>
      </ThemedView>
    </Modal>
  );

};
export default ChangeDateModal;

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  modalView: {
    margin: 10,
    padding: 35,
    borderRadius: 40,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    width: '80%',
  },
  modalText: {
    marginBottom: 20,
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 24,
    lineHeight: 32,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    margin: 'auto',
    marginBottom: 20,
    backgroundColor: 'transparent',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    margin: 'auto',
    backgroundColor: 'transparent',
  },
  dateContainer: {
    width: '50%',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 'auto',
    backgroundColor: 'transparent',
  },
  timeContainer: {
    width: '50%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    minWidth: 120,
  },
});