fuse_expo/app/(tabs)/countdown.tsx

import React, { useState, useEffect } from 'react';
import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import axios from 'axios';
import ChangeDateDrawer from '@/components/ChangeDateDrawer';

const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;


// Separate API call function
const fetchCountdownDate = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/getCountdown`, {
      params: { apiKey: API_KEY }
    });
    console.log('API response:', response.data);
    if (response.data && response.data[0] && response.data[0].countdown) {
      console.log('Countdown date:', response.data[0].countdown);
      return new Date(response.data[0].countdown);
    } else {
      console.error('Unexpected API response format:', response.data);
      return null;
    }
  } catch (error) {
    console.error('API call error:', error);
    return null;
  }
};

export default function TabTwoScreen() {
  const [countdown, setCountdown] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
  const [targetDate, setTargetDate] = useState<Date | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isDateDrawerVisible, setIsDateDrawerVisible] = useState(false);

  useEffect(() => {
    const loadCountdownDate = async () => {
      setIsLoading(true);
      const date = await fetchCountdownDate();
      if (date) {
        setTargetDate(date);
      }
      setIsLoading(false);
    };

    loadCountdownDate();
  }, []);

  useEffect(() => {
    if (targetDate === null) return;

    const interval = setInterval(() => {
      const now = new Date();
      const distance = targetDate.getTime() - now.getTime();

      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);

      setCountdown({ days, hours, minutes, seconds });

      if (distance < 0) {
        clearInterval(interval);
        setCountdown({ days: 0, hours: 0, minutes: 0, seconds: 0 });
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [targetDate]);

  const handleDateChange = (newDate: Date) => {
    setTargetDate(newDate);
  };

  if (isLoading) {
    return (
      <ThemedView style={styles.container}>
        <ActivityIndicator size="large" color="#0000ff" />
      </ThemedView>
    );
  }

  return (
    <ThemedView style={styles.container}>
      <ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
      <ThemedView style={styles.countdownContainer}>
        <CountdownItem value={countdown.days} label="Days" />
        <CountdownItem value={countdown.hours} label="Hours" />
        <CountdownItem value={countdown.minutes} label="Minutes" />
        <CountdownItem value={countdown.seconds} label="Seconds" />
      </ThemedView>
      <TouchableOpacity 
        style={styles.changeButton} 
        onPress={() => setIsDateDrawerVisible(true)}
      >
        <ThemedText style={styles.changeButtonText}>Change Date</ThemedText>
      </TouchableOpacity>
      {targetDate && (
        <ChangeDateDrawer
          isVisible={isDateDrawerVisible}
          onClose={() => setIsDateDrawerVisible(false)}
          onDateChange={handleDateChange}
          currentDate={targetDate}
        />
      )}
    </ThemedView>
  );
}

function CountdownItem({ value, label }: { value: number; label: string }) {
  return (
    <ThemedView style={styles.countdownItem}>
      <ThemedText style={styles.countdownValue}>{value}</ThemedText>
      <ThemedText style={styles.countdownLabel}>{label}</ThemedText>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 56,
    lineHeight: 64,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    paddingHorizontal: 20,
  },
  countdownContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  countdownItem: {
    margin: 10,
    lineHeight: 32,
    alignItems: 'center',
  },
  countdownValue: {
    fontSize: 32,
    lineHeight: 32,
    fontWeight: 'bold',
  },
  countdownLabel: {
    fontSize: 24,
  },
  changeButton: {
    backgroundColor: '#007AFF',
    padding: 10,
    borderRadius: 5,
    marginTop: 20,
  },
  changeButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});