cally/components/pages/todos/ToDoItem.tsx

import {
  View,
  Text,
  Checkbox,
  TouchableOpacity,
  Dialog,
  Button,
  ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
import { Ionicons } from "@expo/vector-icons";
import PointsSlider from "@/components/shared/PointsSlider";
import { IToDo } from "@/hooks/firebase/types/todoData";
import { ImageBackground } from "react-native";
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import RepeatIcon from "@/assets/svgs/RepeatIcon";

const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
  const { updateToDo } = useToDosContext();
  const { data: members } = useGetFamilyMembers();
  const [visible, setVisible] = useState<boolean>(false);
  const [points, setPoints] = useState(props.item.points);
  const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);

  const handlePointsChange = (text: string) => {
    const numericValue = parseInt(text, 10);

    if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
      setPoints(numericValue);
    } else if (text === "") {
      setPoints(0);
    }
  };

  const getInitials = (firstName: string, lastName: string) => {
    return `${firstName.charAt(0)}${lastName.charAt(0)}`;
  };

  const selectedMembers = members?.filter((x) =>
    props?.item?.assignees?.includes(x?.uid!)
  );
  return (
    <View
      centerV
      paddingV-10
      paddingH-13
      marginV-10
      style={{
        borderRadius: 17,
        backgroundColor: props.item.done ? "#e0e0e0" : "white",
        opacity: props.item.done ? 0.3 : 1,
      }}
    >
      {visible && (
        <AddChoreDialog
          isVisible={visible}
          setIsVisible={setVisible}
          selectedTodo={props.item}
        />
      )}
      <View paddingB-8 row spread>
        <Text
          text70
          style={{
            textDecorationLine: props.item.done ? "line-through" : "none",
            fontFamily: "Manrope_500Medium",
            fontSize: 15,
          }}
          onPress={() => {
            setVisible(true);
          }}
        >
          {props.item.title}
        </Text>
        <Checkbox
          value={props.item.done}
          containerStyle={{
            borderWidth: 0.7,
            borderRadius: 50,
            borderColor: "gray",
            height: 24.64,
            width: 24.64,
          }}
          color="#fd1575"
          onValueChange={(value) => {
            updateToDo({ id: props.item.id, done: !props.item.done });
          }}
        />
      </View>
      <View centerH paddingV-0>
        <View
          centerV
          height={0.7}
          width={"100%"}
          style={{
            backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
          }}
          centerH
        />
      </View>
      <View centerV centerH marginT-8 row spread>
        <View row>
          {props.item.points && props.item.points > 0 ? (
            <TouchableOpacity
              onPress={() => {
                if (props.isSettings) {
                  setPointsModalVisible(true);
                }
              }}
            >
              <View centerV row gap-3>
                <Ionicons name="gift-outline" size={20} color="#46a80a" />
                <Text
                  color="#46a80a"
                  style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
                >
                  {props.item.points} points
                </Text>
              </View>
            </TouchableOpacity>
          ) : (
            <View />
          )}

          {!(props.item.repeatType == "None") && (
            <View row centerV marginL-8>
              <RepeatIcon style={{ marginRight: 4 }} />
              <Text
                style={{
                  fontSize: 12,
                  fontFamily: "Manrope_500Medium",
                  color: "#858585",
                }}
              >
                {(() => {
                  switch (props.item.repeatType) {
                    case "Once a month":
                      return "Monthly";
                    case "Every week":
                      return "Weekly";
                    case "Once a year":
                      return "Yearly";
                    default:
                      return props.item.repeatType;
                  }
                })()}
              </Text>
            </View>
          )}  
        </View>
        <View row style={{ gap: 3 }}>
          {selectedMembers?.map((member) => {
            return member?.pfp ? (
              <ImageBackground
                source={{ uri: member.pfp }}
                style={{
                  height: 24.64,
                  aspectRatio: 1,
                  borderRadius: 22,
                  overflow: "hidden",
                }}
              />
            ) : (
              <View
                style={{
                  position: "relative",
                  width: 24.64,
                  aspectRatio: 1,
                }}
              >
                <View
                  style={{
                    backgroundColor: "#ccc",
                    justifyContent: "center",
                    alignItems: "center",
                    borderRadius: 100, // Circular shape
                    width: "100%",
                    height: "100%",
                  }}
                >
                  <Text
                    style={{
                      color: "#fff",
                      fontSize: 12,
                      fontWeight: "bold",
                    }}
                  >
                    {getInitials(member.firstName, member.lastName ?? "")}
                  </Text>
                </View>
              </View>
            );
          })}
        </View>
      </View>
      <Dialog
        visible={pointsModalVisible}
        onDismiss={() => setPointsModalVisible(false)}
        containerStyle={{
          padding: 20,
          borderRadius: 15,
          backgroundColor: "white",
        }}
        children={
          <View gap-20>
            <View row centerV marginL-30>
              <Ionicons name="gift-outline" size={22} color="#919191" />
              <Text marginH-10 text70>
                Reward points
              </Text>
            </View>
            {points && (
              <PointsSlider
                points={points}
                setPoints={setPoints}
                handleChange={handlePointsChange}
              />
            )}
            <View row marginH-30 spread>
              <Button
                size={ButtonSize.large}
                label="Cancel"
                backgroundColor="#d9d9d9"
                onPress={() => {
                  setPointsModalVisible(false);
                }}
              />
              <Button
                size={ButtonSize.large}
                label="Save points"
                backgroundColor="#fd1775"
                style={{ height: 60, width: 150 }}
                onPress={() => {
                  updateToDo({ id: props.item.id, points: points });
                  setPointsModalVisible(false);
                }}
              />
            </View>
          </View>
        }
      />
    </View>
  );
};

export default ToDoItem;