cally/components/pages/todos/family-chores/FamilyChoresProgress.tsx

import { View, Text } from "react-native-ui-lib";
import React, {useCallback} from "react";
import { ImageBackground, StyleSheet } from "react-native";
import FamilyChart from "./FamilyChart";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
import { Ionicons } from "@expo/vector-icons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ProfileType } from "@/contexts/AuthContext";
import { ScrollView } from "react-native-gesture-handler";
import { useFocusEffect } from "@react-navigation/core";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";

const FamilyChoresProgress = ({
  setPageIndex,
}: {
  setPageIndex: (value: number) => void;
}) => {
  const { data: familyMembers, refetch: refetchFamilyMembers } = useGetFamilyMembers();
  const children = familyMembers?.filter(
    (member) => member.userType === ProfileType.CHILD
  );

  useFocusEffect(
      useCallback(() => {
        refetchFamilyMembers();
      }, [refetchFamilyMembers])
  );

  return (
    <View marginT-20 marginH-5 marginB-100>
      <ScrollView>
        <TouchableOpacity onPress={() => setPageIndex(0)}>
          <View row marginT-4 marginB-10 centerV>
            <Ionicons
              name="chevron-back"
              size={14}
              color="#979797"
              style={{ paddingBottom: 3 }}
            />
            <Text
              style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
              color="#979797"
            >
              Return to To Dos
            </Text>
          </View>
        </TouchableOpacity>
        <View centerH>
          <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 23 }}>
            Family Chores Progress Report
          </Text>
        </View>
        <View row spread marginT-35 marginB-20>
          <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 15 }}>
            Points earned this week
          </Text>
          <View row>
            {children?.map((child: UserProfile) => {
              return child.weeklyPoints && child.weeklyPoints > 0 ? (
                  <View
                      key={child.uid}
                      style={styles.pfpSmall}
                      backgroundColor={child.eventColor || "#05a8b6"}
                      center
                  >
                    {child.pfp ? (
                        <ImageBackground
                            source={{ uri: child.pfp }}
                            style={{
                              height: 25,
                              aspectRatio: 1,
                              borderRadius: 22,
                              overflow: "hidden",
                            }}
                        />
                    ) : (
                        <Text color="white" style={{fontSize: 15}}>
                          {child.firstName.at(0)}
                          {child.lastName.at(0)}
                        </Text>
                    )}
                  </View>
              ) : null
            })}
          </View>
        </View>
        <View style={styles.card} paddingL-10>
          <FamilyChart children={children} />
        </View>
        <Text
          text70
          style={{ fontFamily: "Manrope_700Bold", fontSize: 15 }}
          marginV-20
        >
          Chore Tracker
        </Text>
        {children?.map((child) => (
          <View
            key={child.uid}
            style={styles.card}
            marginB-20
            row
            spread
            centerV
          >
            <View
              style={styles.pfpBig}
              backgroundColor={child.eventColor || "#05a8b6"}
              center
            >
              {child.pfp ? (
                <ImageBackground
                  source={{ uri: child.pfp }}
                  style={{
                    height: 45,
                    aspectRatio: 1,
                    borderRadius: 22,
                    overflow: "hidden",
                  }}
                />
              ) : (
                <Text color="white" style={{ fontSize: 20 }}>
                  {child.firstName.at(0)}
                  {child.lastName.at(0)}
                </Text>
              )}
            </View>
            <Text
              color="#858585"
              style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
            >
              {child.firstName}
            </Text>
            <View centerV>
              <Text style={{ fontSize: 15, fontFamily: "Manrope_700Bold" }}>
                {`${child?.weeklyCompletedTodos ?? 0} chores completed`}
              </Text>
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  pfpSmall: {
    width: 30,
    aspectRatio: 1,
    borderRadius: 50,
    marginHorizontal: 2,
  },
  pfpBig: {
    width: 50,
    aspectRatio: 1,
    borderRadius: 50,
  },
  card: {
    backgroundColor: "white",
    borderRadius: 20,
    padding: 20,
  },
});

export default FamilyChoresProgress;