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

import {
  View,
  Text,
  ProgressBar,
  Button,
  ButtonSize,
  Modal,
  Dialog,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
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";

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>Back to ToDos</Text>
        </TouchableOpacity>
        <View centerH>
          <Text text50R>Your To Dos Progress Report</Text>
        </View>
        <View row spread marginT-25 marginB-5>
          <Text text70>Daily Goal</Text>
        </View>
        <ProgressCard />
        <View row spread marginT-10 marginB-5>
          <Text text70>Points Earned This Week</Text>
        </View>
        <View style={styles.card} paddingL-10>
          <UserChart />
        </View>
        <View row spread marginT-20 marginB-8 centerV>
          <Text text70>Total Reward Points</Text>
          <Button
            size={ButtonSize.small}
            label="Spend my points"
            color="#50be0c"
            backgroundColor="#ebf2e4"
            onPress={() => setModalVisible(true)}
            iconSource={() => (
              <AntDesign
                name="gift"
                size={20}
                style={{ marginRight: 5 }}
                color="#50be0c"
              />
            )}
          />
        </View>
        <View style={styles.card}>
          <View row centerV>
            <Ionicons name="flower-outline" size={30} color="#8005eb" />
            <Text text70 marginL-5>
              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>0</Text>
            <Text>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>
              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}
            />
            <Button
              label="Extra Screen Time - 100 pts"
              text70
              marginB-15
              backgroundColor="#ea156c"
              size={ButtonSize.large}
            />
            <Button
              label="Movie Night - 50 pts"
              text70
              marginB-15
              backgroundColor="#7305d4"
              size={ButtonSize.large}
            />
            <Button
              label="Ice Cream Treat - 25 pts"
              text70
              marginB-15
              backgroundColor="#e28800"
              size={ButtonSize.large}
            />
            <TouchableOpacity onPress={() => setModalVisible(false)}>
                <Text text70 center color="#999999">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,
  },
});

export default UserChoresProgress;