cally/components/pages/todos/ToDoItem.tsx

import {
  View,
  Text,
  TouchableOpacity,
  Dialog,
  Button,
  ButtonSize,
  Checkbox,
} 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, StyleSheet } from "react-native";
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import RepeatIcon from "@/assets/svgs/RepeatIcon";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { format } from "date-fns";
import { Image } from "react-native";

const ToDoItem = (props: {
  item: IToDo;
  isSettings?: boolean;
  is7Days?: boolean;
  localTodos: Array<IToDo>;
  setLocalTodos: Function;
}) => {
  const { updateToDo } = useToDosContext();
  const { data: members } = useGetFamilyMembers();
  const { profileData } = useAuthContext();
  const isParent = profileData?.userType === ProfileType.PARENT;
  const isChild = profileData?.userType === ProfileType.CHILD;

  const [showAnimation, setShowAnimation] = useState(false);
  const [visible, setVisible] = useState<boolean>(false);
  const [points, setPoints] = useState(props.item.points);
  const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
  const [creator, setCreator] = useState("");

  useEffect(() => {
    let creatorMember = members?.find(
      (member) => member?.uid === props.item.creatorId
    );
    const fullName = `${creatorMember?.firstName ?? ""}`;
    setCreator(fullName);
  }, []);

  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!)
  );

  let isTodoEditable;
  if (isParent) {
    isTodoEditable = true;
  } else {
    isTodoEditable = props.item.creatorId === profileData?.uid;
  }

  const handleTodoClickAnimation = () => {
    setShowAnimation(true);

    // Optionally hide animation after 2 seconds
    setTimeout(() => {
      setShowAnimation(false);
    }, 2000);
  };

  return (
    <View
      key={props.item.id}
      centerV
      paddingV-10
      paddingH-13
      marginV-10
      style={{
        borderRadius: 17,
        backgroundColor: "white",
      }}
    >
      {showAnimation && (
        <View style={styles.animationContainer}>
          <View style={styles.animationOverlay}>
            <Image
              source={require("@/assets/animations/todoCompletedAnimation.gif")}
              style={styles.animation}
              resizeMode="contain"
            />
          </View>
        </View>
      )}
      {visible && (
        <AddChoreDialog
          isVisible={visible}
          setIsVisible={setVisible}
          selectedTodo={props.item}
        />
      )}
      <View paddingB-8 row spread>
        <TouchableOpacity
          onPress={() => {
            isTodoEditable ? setVisible(true) : null;
          }}
          hitSlop={{right: 150, top:10}}
        >
          <Text
            text70
            style={{
              textDecorationLine: props.item.done ? "line-through" : "none",
              fontFamily: "Manrope_500Medium",
              color: props.item.done ? "#a09f9f" : "black",
              fontSize: 15,
            }}
          >
            {props.item.title}
          </Text>
        </TouchableOpacity>
        <Checkbox
          value={props.item.done}
          containerStyle={[styles.checkbox, { borderRadius: 50 }]}
          style={styles.checked}
          size={26.64}
          borderRadius={50}
          color="#fd1575"
          onValueChange={() => {
            const updatedTodos = props.localTodos?.map((item) =>
              item.id === props.item.id
                ? { ...item, done: !props.item.done }
                : item
            );
            props.setLocalTodos(updatedTodos);
            updateToDo({ id: props.item.id, done: !props.item.done });
            if (!props.item.done && isChild) {
              handleTodoClickAnimation();
            }
          }}
        />
      </View>
      <View centerH paddingV-0>
        <View
          centerV
          height={0.7}
          width={"100%"}
          style={{
            backgroundColor: "#e7e7e7",
          }}
          centerH
        />
      </View>
      <View centerV centerH marginT-8 row spread>
        <View>
          <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;
                    }
                  })()}
                  {props.item.date &&
                    props.is7Days &&
                    " / " + format(props.item.date, "EEEE")}
                </Text>
              </View>
            )}
          </View>
          <View row centerV marginL-5 marginT-2>
            <Text
              style={{
                fontSize: 12,
                fontFamily: "Manrope_500Medium",
                color: "#858585",
              }}
            >
              Created by: {creator}
            </Text>
          </View>
        </View>
        <View row style={{ gap: 3 }}>
          {selectedMembers?.map((member) => {
            return member?.pfp ? (
              <ImageBackground
                key={member?.uid}
                source={{ uri: member.pfp }}
                style={{
                  height: 24.64,
                  aspectRatio: 1,
                  borderRadius: 22,
                  overflow: "hidden",
                  borderWidth: 2,
                  borderColor: member.eventColor || "transparent",
                }}
              />
            ) : (
              <View
                style={{
                  position: "relative",
                  width: 24.64,
                  aspectRatio: 1,
                  borderWidth: 2,
                  borderRadius: 100,
                  borderColor: member.eventColor || "#ccc",
                }}
              >
                <View
                  style={{
                    backgroundColor: member.eventColor || "#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;

const styles = StyleSheet.create({
  checkbox: {
    borderRadius: 50,
    borderWidth: 0.7,
    color: "#bfbfbf",
    borderColor: "#bfbfbf",
    width: 24.64,
    aspectRatio: 1,
  },
  checked: {
    borderRadius: 50,
  },
  animation: {
    width: 100,
    height: 100,
    marginTop: 10,
  },
  animationContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
  },
  animationOverlay: {
    position: "absolute", // Overlay on top of everything
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent background
    zIndex: 10,
  },
});