cally/components/pages/todos/ToDoItem.tsx

import {
  View,
  Text,
  Checkbox,
  TextField,
  TouchableOpacity,
  Modal,
  Dialog,
  Button,
  ButtonSize,
} from "react-native-ui-lib";
import React, { useEffect, 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";

const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
  const { updateToDo } = useToDosContext();
  const [editing, setEditing] = 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);
    }
  };
  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,
      }}
    >
      <View paddingB-8 row spread>
        {!editing ? (
          <Text
            text70
            style={{
              textDecorationLine: props.item.done ? "line-through" : "none",
              fontFamily: "Manrope_500Medium",
              fontSize: 15,
            }}
            onPress={() => {
              if (props.isSettings) {
                setEditing(true);
              }
            }}
          >
            {props.item.title}
          </Text>
        ) : (
          <TextField
            value={props.item.title}
            text70R
            onChangeText={(text) => {
              updateToDo({ id: props.item.id, title: text });
            }}
            onSubmitEditing={() => {
              setEditing(false);
            }}
            onBlur={() => {
              setEditing(false);
            }}
          />
        )}
        <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 />
        )}
        <ImageBackground
          source={require("../../../assets/images/child-picture.png")}
          style={{
            height: 24.64,
            aspectRatio: 1,
            borderRadius: 22,
            overflow: "hidden",
          }}
        />
      </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;