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

const API_KEY = 'I_Love_Madeline';
const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';

export default function HomeScreen() {
  const [message, setMessage] = useState('Loading message...');

  useEffect(() => {
    fetchMessage();
    const intervalId = setInterval(fetchMessage, 10000); // Every 10 seconds
    return () => clearInterval(intervalId);
  }, []);

  const fetchMessage = async () => {
    try {
      const storedUser = await AsyncStorage.getItem('@user');
      if (!storedUser) {
        setMessage('User not found. Please select a user.');
        return;
      }

      const user = JSON.parse(storedUser);
      //const otherUserId = user.id === 1 ? 2 : 1;

      const response = await axios.get(`${BASE_URL}/getMessage`, {
        params: { apiKey: API_KEY, userId: user.id }
      });

      if (response.data && response.data[0] && response.data[0].receivedMessage) {
        setMessage(response.data[0].receivedMessage);
      } else {
        setMessage('No message found.');
      }
    } catch (error) {
      console.error('API call error:', error);
      setMessage('Failed to fetch message. Please try again.');
    }
  };

  return (
    <ThemedView style={styles.container}>
      <ThemedText style={styles.title}>{message}</ThemedText>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 32,
    lineHeight: 40,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    paddingHorizontal: 20,
  },
});