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


export default function TabTwoScreen() {
  const [countdown, setCountdown] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  const targetDate = new Date('2024-09-20T10:10:00').getTime();

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

      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]);

  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>
    </ThemedView>
  );
}

function CountdownItem({ value, label }) {
  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,
  },
});