cally/components/pages/todos/user-chores/UserChoresProgress.tsx

import {Button, ButtonSize, Dialog, ProgressBar, Text, TouchableOpacity, View,} from "react-native-ui-lib";
import React, {useEffect, useState} from "react";
import {StyleSheet} from "react-native";
import UserChart from "./UserChart";
import ProgressCard, {transformNumber} from "../ProgressCard";
import {AntDesign, Ionicons} from "@expo/vector-icons";
import {ScrollView} from "react-native-gesture-handler";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
import {useAuthContext} from "@/contexts/AuthContext";

const PROGRESS_LIMIT = 5000;

const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) => void; }) => {
    const [modalVisible, setModalVisible] = useState<boolean>(false);
    const { profileData, refreshProfileData } = useAuthContext();

    const allTimePoints = profileData?.allTimePoints ?? 0;
    let transformedAllTimePoints = transformNumber(allTimePoints, PROGRESS_LIMIT);

    useEffect(() => {
        refreshProfileData();
    }, [])

    return (
        <View marginT-20 paddingB-20>
            <ScrollView
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
            >
                <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>
                    <Text style={{fontFamily: "Manrope_700Bold", fontSize: 20}}>
                        Your To Dos Progress Report
                    </Text>
                </View>
                <View row spread marginT-25 marginB-5>
                    <Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
                        Daily Goal
                    </Text>
                </View>
                <ProgressCard/>
                <View row spread marginT-15 marginB-8>
                    <Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
                        Points Earned This Week
                    </Text>
                </View>
                <View style={styles.card} paddingL-10>
                    <UserChart profileData={profileData}/>
                </View>
                <View row spread marginT-20 marginB-8 centerV>
                    <Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
                        Total Reward Points
                    </Text>
                    <Button
                        size={ButtonSize.small}
                        disabled
                        label="Spend my points"
                        color="#50be0c"
                        backgroundColor="#ebf2e4"
                        onPress={() => setModalVisible(true)}
                        labelStyle={{
                            fontSize: 13,
                            fontFamily: "Manrope_400Regular",
                        }}
                        iconSource={() => (
                            <AntDesign
                                name="gift"
                                size={20}
                                style={{marginRight: 5}}
                                color="#50be0c"
                            />
                        )}
                    />
                </View>
                <View style={styles.card}>
                    <View row centerV>
                        <FireworksOrangeIcon color="#8005eb"/>
                        <Text
                            marginL-8
                            text70
                            style={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
                        >
                            You have {allTimePoints} points saved!
                        </Text>
                    </View>
                    <ProgressBar
                        progress={transformedAllTimePoints}
                        progressColor="#ff9900"
                        style={{
                            height: 21,
                            backgroundColor: "#faeedb",
                            marginTop: 15,
                            marginBottom: 5,
                        }}
                    />
                    <View row spread>
                        <Text style={{fontSize: 13, color: "#858585"}}>0</Text>
                        <Text style={{fontSize: 13, color: "#858585"}}>5000</Text>
                    </View>
                </View>
            </ScrollView>
            <Dialog
                visible={modalVisible}
                onDismiss={() => setModalVisible(false)}
                children={
                    <View style={styles.card} paddingH-35 paddingT-35>
                        <Text text60 center marginB-35 style={{fontFamily: 'Manrope_600SemiBold'}}>
                            How would you like to spend your points?
                        </Text>
                        <Button
                            label="Skip a Chore Cor a Day - 150 pts"
                            text70
                            marginB-15
                            backgroundColor="#05a8b6"
                            size={ButtonSize.large}
                            labelStyle={styles.bigButtonText}
                        />
                        <Button
                            label="Extra Screen Time - 100 pts"
                            text70
                            marginB-15
                            backgroundColor="#ea156c"
                            size={ButtonSize.large}
                            labelStyle={styles.bigButtonText}
                        />
                        <Button
                            label="Movie Night - 50 pts"
                            text70
                            marginB-15
                            backgroundColor="#7305d4"
                            size={ButtonSize.large}
                            labelStyle={styles.bigButtonText}
                        />
                        <Button
                            label="Ice Cream Treat - 25 pts"
                            text70
                            marginB-15
                            backgroundColor="#e28800"
                            size={ButtonSize.large}
                            labelStyle={styles.bigButtonText}
                        />
                        <TouchableOpacity onPress={() => setModalVisible(false)}>
                            <Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}}>
                                Go back to my to dos
                            </Text>
                        </TouchableOpacity>
                    </View>
                }
            />
        </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,
    },
    bigButtonText: {
        fontFamily: 'Manrope_400Regular'
    }
});

export default UserChoresProgress;