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

import {
  View,
  Text,
  ProgressBar,
  Button,
  ButtonSize,
  Modal,
  Dialog,
  TouchableOpacity,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import UserChart from "./UserChart";
import ProgressCard from "../ProgressCard";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { ScrollView } from "react-native-gesture-handler";
import { PanViewDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";

const UserChoresProgress = ({
  setPageIndex,
}: {
  setPageIndex: (value: number) => void;
}) => {
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  return (
    <View marginT-20 paddingB-20>
      <ScrollView
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      >
        <TouchableOpacity onPress={() => setPageIndex(0)}>
          <Text style={{ fontSize: 14 }}>Back to ToDos</Text>
        </TouchableOpacity>
        <View>
          <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 20 }}>
            Your To Do's 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 />
        </View>
        <View row spread marginT-20 marginB-8 centerV>
          <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
            Total Reward Points
          </Text>
          <Button
            size={ButtonSize.small}
            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 1200 points saved!
            </Text>
          </View>
          <ProgressBar
            progress={80}
            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;