wavelength_app/components/home/CountdownChangeDateModal.tsx

import React, { useState } from 'react';
import { StyleSheet, Modal, TextInput } 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';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

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

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

  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, title: title };
        console.log(updatedCountdown);
        await setCountdown(user.id, updatedCountdown);
        onDateChange(date, title);
        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.titleBox}>
            <TextInput
              style={[
                styles.titleInput,
                {color: Colors[scheme].text}
              ]}
              onChangeText={setTitle}
              value={title}
              placeholder='Countdown Title'
              placeholderTextColor={Colors[scheme].icon}
            />
          </ThemedView>
          <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%',
  },
  titleBox: {
  },
  titleInput: {
    height: 40,
    width: 200,
    paddingHorizontal: 10,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
  },
  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,
  },
});