ERROR  VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
 ERROR  Warning: CarouselCard: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    in CarouselCard (created by BaseLayout)
 ERROR  VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

// frontend/screens/Home/HomeScreen.js
import React, { useContext, useState, useMemo } from 'react';
import { View, Text, SafeAreaView, ScrollView, Dimensions } from 'react-native';
import { AuthContext } from '../../context/AuthContext';
import { useTheme } from 'react-native-paper';
import Carousel from 'react-native-reanimated-carousel';
import CarouselCard from '../../Components/CarouselCard';
import CaloriesTracker from '../../Components/CaloriesTracker';
import StepsTracker from '../../Components/StepsTracker';
import WaterTracker from '../../Components/WaterTracker';
import MacroNutrients from '../../Components/MacroNutrients';
import ExerciseTracker from '../../Components/ExerciseTracker';
import FriendsOverview from '../../Components/FriendsOverview';
import NavigationButtons from '../../Components/NavigationButtons';
import useCalorieTracker from '../../hooks/useCalorieTracker';
import useStepsTracker from '../../hooks/useStepsTracker';
import useWaterTracker from '../../hooks/useWaterTracker';
import useFriends from '../../hooks/useFriends';
import { useNavigation } from '@react-navigation/native';
import createStyles from './HomeScreenStyles';

const { width: screenWidth } = Dimensions.get('window');

const HomeScreen = () => {
  const { user } = useContext(AuthContext);
  const theme = useTheme();
  const navigation = useNavigation();
  const styles = createStyles(theme); // Generate styles based on the theme

  // Custom Hooks for trackers
  const {
    calories,
    goal: calorieGoal,
    addCalories,
    resetCalories,
  } = useCalorieTracker();

  const {
    steps,
    goal: stepGoal,
    addSteps,
    resetSteps,
  } = useStepsTracker();

  const {
    waterIntake,
    goal: waterGoal,
    addWater,
    resetWater,
  } = useWaterTracker();

  // Friends data
  const friends = useFriends();

  // State for Carousel Pagination
  const [activeSlide, setActiveSlide] = useState(0);

  // Define Carousel Items using useMemo for performance
  const carouselItems = useMemo(
    () => [
      {
        title: 'Calorie Tracker',
        iconName: 'fire',
        content: (
          <CaloriesTracker
            calories={calories}
            goal={calorieGoal}
            addCalories={addCalories}
            resetCalories={resetCalories}
            theme={theme}
          />
        ),
        buttonTitle: 'Add Food',
        onPress: () => navigation.navigate('Nutrition'),
      },
      {
        title: 'Macro Nutrients',
        iconName: 'food',
        content: <MacroNutrients />,
        buttonTitle: null,
        onPress: null,
      },
      {
        title: 'Steps Tracker',
        iconName: 'walk',
        content: (
          <StepsTracker
            steps={steps}
            goal={stepGoal}
            addSteps={addSteps}
            resetSteps={resetSteps}
            theme={theme}
          />
        ),
        buttonTitle: 'View Steps',
        onPress: () => navigation.navigate('Steps'),
      },
      {
        title: 'Exercise Tracker',
        iconName: 'dumbbell',
        content: <ExerciseTracker exercises={[]} onAddExercise={() => {}} navigation={navigation} />,
        buttonTitle: 'Add Exercise',
        onPress: () => navigation.navigate('Exercises'),
      },
      {
        title: 'Water Tracker',
        iconName: 'cup-water',
        content: (
          <WaterTracker
            waterIntake={waterIntake}
            goal={waterGoal}
            addWater={addWater}
            resetWater={resetWater}
            theme={theme}
          />
        ),
        buttonTitle: null,
        onPress: null,
      },
    ],
    [
      calories,
      calorieGoal,
      addCalories,
      resetCalories,
      steps,
      stepGoal,
      addSteps,
      resetSteps,
      waterIntake,
      waterGoal,
      addWater,
      resetWater,
      navigation,
      theme,
    ]
  );

  const renderCarouselItem = ({ item }) => (
    <CarouselCard
      title={item.title}
      iconName={item.iconName}
      buttonTitle={item.buttonTitle}
      onPress={item.onPress}
    >
      {item.content}
    </CarouselCard>
  );

  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.container}>
        {/* Welcome Message */}
        <Text style={styles.title}>{user ? `Welcome, ${user.name}!` : 'Welcome!'}</Text>

        {/* Carousel Section */}
        <View style={styles.carouselContainer}>
          <Carousel
            width={screenWidth * 0.9} // Width of the carousel
            height={350} // Adjust height as needed
            data={carouselItems}
            scrollAnimationDuration={300} // Smooth transitions
            onSnapToItem={(index) => setActiveSlide(index)}
            renderItem={renderCarouselItem}
            mode="parallax" // Carousel mode
            modeConfig={{
              parallaxScrollingScale: 0.9,
              parallaxScrollingOffset: 50,
            }}
            loop
            autoPlay={false}
          />
          {/* Custom Pagination */}
          <View style={styles.paginationContainer}>
            {carouselItems.map((_, index) => (
              <View
                key={index}
                style={[
                  styles.paginationDot,
                  activeSlide === index && styles.activePaginationDot,
                ]}
              />
            ))}
          </View>
        </View>

        {/* Friends Overview Card */}
        <FriendsOverview friends={friends} navigation={navigation} theme={theme} />

        {/* Navigation Buttons */}
        <NavigationButtons navigation={navigation} theme={theme} />
      </ScrollView>
    </SafeAreaView>
  );
};

export default HomeScreen;