import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  UIManager,
  Platform,
  Image,
} from "react-native";
import AppView from "../../components/AppView";
import UserProfileStatus from "./UserProfileStatus";
import colors from "../../components/colors";
import GroupsTabs from "./GroupsTabs";
import { useSelector } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import UserHome from "./user-home/UserHome";
// Enable animation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
const Home = () => {
  const user = useSelector((state: any) => state.user);
  const navigation = useNavigation();
  console.log("redux user data in Home:", user);
  return (
    <AppView barStyle="dark-content" style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.greeting}>Hello, {user.firstName} {user.lastName}👋</Text>
        <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
         
          <Image
            source={
              user.imageBlob
              && { uri: user.imageBlob ? `data:image/jpeg;base64,${user.imageBlob}` : user.profilePicture }
            }
            style={{ width: 40, height: 40, borderRadius: 20, borderColor: colors.primary, borderWidth: 2 }}
          />
        </TouchableOpacity>
      </View>
      {/* Status */}
      <UserProfileStatus />
      {user?.role === "USER" ? <UserHome /> :
      <GroupsTabs />}
    </AppView>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    paddingBottom: '25%',
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  greeting: { fontSize: 22, fontWeight: "600", color: colors.Home },


});