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 (
    <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
      onRequestClose={onClose}
    >
      <ThemedView style={styles.centeredView}>
        <ThemedView style={styles.modalView}>
          <LinearGradient
            colors={['#F67C0A', '#F60AD3']}
            style={styles.modalView}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
          >
            <ThemedText style={styles.modalText}>Set New Countdown Date & Time</ThemedText>

            <ThemedView style={styles.buttonContainer}>
              <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}>
              <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>
          </LinearGradient>
        </ThemedView>
      </ThemedView>
    </Modal>
  );
}

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,
  },
});