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 { LinearGradient } from 'expo-linear-gradient';
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 }
    });
    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>
    );
  }
  let days = countdown.days === 1 ? 'Day' : 'Days';
  let hours = countdown.hours === 1 ? 'Hour' : 'Hours';
  let minutes = countdown.minutes === 1 ? 'Minute' : 'Minutes';
  let seconds = countdown.seconds === 1 ? 'Second' : 'Seconds';

  return (
    <LinearGradient
      colors={['#F67C0A', '#F60AD3']}
      style={styles.container}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
    >
      <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>
    </LinearGradient>
  );
}

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',
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 64,
    lineHeight: 64,
    fontWeight: 'bold',
    marginTop: 100,
    marginBottom: 60,
    textAlign: 'center',
    paddingHorizontal: 20,
  },
  countdownContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    marginBottom: 180,
  },
  countdownItem: {
    margin: 10,
    lineHeight: 42,
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  countdownValue: {
    fontSize: 36,
    lineHeight: 42,
    fontWeight: 'bold',
  },
  countdownLabel: {
    fontSize: 32,
    lineHeight: 42,
  },
  changeButton: {
    backgroundColor: '#730FF8',
    padding: 15,
    borderRadius: 10,
    marginTop: 40,
  },
  changeButtonText: {
    color: 'white',
    fontSize: 22,
    fontWeight: 'bold',
  },
});