ERROR  Error fetching workout data: [AxiosError: Network Error]
// screens/ProfileScreen.js

import React, { useContext } from 'react';
import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
import { Title, Caption, Text } from 'react-native-paper';
import { AuthContext } from '../context/AuthContext';
import { useTheme } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import WorkoutHeatmap from '../Components/WorkoutHeatmap'; // Import the Heatmap component

const ProfileScreen = ({ navigation }) => {
  const { user, loading } = useContext(AuthContext);
  const theme = useTheme(); // Access the current theme

  /**
   * If the app is still loading user data, show a loading indicator
   */
  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={theme.colors.primary} />
      </View>
    );
  }

  /**
   * If no user is logged in, prompt the user to log in
   */
  if (!user) {
    return (
      <View style={styles.container}>
        <Text style={{ color: theme.colors.text }}>No user data available. Please log in.</Text>
        {/* Assume there's a Login button or navigation here */}
      </View>
    );
  }

  /**
   * Render the user's profile information along with the workout heatmap
   */
  return (
    <ScrollView
      contentContainerStyle={[styles.container, { backgroundColor: theme.colors.background }]}
    >
      {/* User Information Section with Hamburger Menu */}
      <View style={styles.userInfoSection}>
        <View>
          {user.name ? (
            <Title style={[styles.title, { color: theme.colors.text }]}>{user.name}</Title>
          ) : (
            <Title style={[styles.title, { color: theme.colors.text }]}>User ID: {user.id}</Title>
          )}
          {user.email && (
            <Caption style={[styles.caption, { color: theme.colors.text }]}>{user.email}</Caption>
          )}
        </View>
        {/* Hamburger Menu Button */}
        <TouchableOpacity
          onPress={() => navigation.navigate('Settings')}
          accessibilityLabel="Open Settings"
          accessibilityRole="button"
        >
          <Icon name="menu" size={28} color={theme.colors.primary} />
        </TouchableOpacity>
      </View>

      {/* Workout Heatmap Section */}
      <WorkoutHeatmap />

      {/* Additional Profile Information can be added here */}

      {/* Removed Logout Button from here */}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    padding: 20,
  },
  userInfoSection: {
    paddingHorizontal: 20,
    paddingVertical: 20, // Adjusted padding for alignment
    flexDirection: 'row', // Align items horizontally
    justifyContent: 'space-between', // Space between user info and button
    alignItems: 'center', // Vertically center the items
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 26,
    fontWeight: 'bold',
  },
  caption: {
    fontSize: 16,
    lineHeight: 16,
    marginTop: 5,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ProfileScreen;