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";

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>
        {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 />
        )}
          <View row style={{ gap: 3 }}>
              {selectedMembers?.map((member) => {
                  return member?.pfp ? (
                      <ImageBackground
                              source={require("../../../assets/images/child-picture.png")}
                              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;