cally/components/pages/grocery/GroceryItem.tsx

import {
  View,
  Text,
  Button,
  TouchableOpacity,
  Checkbox,
  ButtonSize,
} from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { MaterialCommunityIcons, AntDesign } from "@expo/vector-icons";
import { ListItem } from "react-native-ui-lib";
import {
  GroceryCategory,
  IGrocery,
  useGroceryContext,
} from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency";
import EditGroceryItem from "./EditGroceryItem";
import { StyleSheet } from "react-native";

const GroceryItem = ({
  item,
  handleItemApproved,
}: {
  item: IGrocery;
  handleItemApproved: (id: number, changes: Partial<IGrocery>) => void;
}) => {
  const { updateGroceryItem, groceries } = useGroceryContext();

  const { profileType } = useAuthContext();
  const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
  const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
  const [newTitle, setNewTitle] = useState<string>("");
  const [category, setCategory] = useState<GroceryCategory>(
    GroceryCategory.None
  );

  const handleTitleChange = (newTitle: string) => {
    updateGroceryItem(item.id, { title: newTitle });
  };

  const handleCategoryChange = (newCategory: GroceryCategory) => {
    updateGroceryItem(item.id, { category: newCategory });
  };

  useEffect(() => {
    setNewTitle(item.title);
  }, []);

  return (
    <View
      key={item.id}
      style={{ borderRadius: 18, marginVertical: 5 }}
      backgroundColor="white"
      centerV
      padding-0
    >
      <ListItem
        onPress={() => {
          setOpenFreqEdit(true);
        }}
      >
        <EditGroceryFrequency
          visible={openFreqEdit}
          key={item.id}
          item={item}
          onClose={() => {
            setOpenFreqEdit(false);
          }}
        />
        <ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
          {!isEditingTitle ? (
            <View>
              <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
                <Text text70BL>{item.title}</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <EditGroceryItem
              editGrocery={{
                id: item.id,
                title: newTitle,
                setTitle: setNewTitle,
                category: category,
                updateCategory: updateGroceryItem,
                closeEdit: setIsEditingTitle,
                setCategory: setCategory,
              }}
            />
          )}
        </ListItem.Part>
        <ListItem.Part right containerStyle={{ paddingEnd: item.approved ? 20 : 5 }}>
          {!item.approved ? (
            <View row >
              <Button
                padding-0
                children={
                  <AntDesign
                    name="check"
                    size={24}
                    style={{
                      color: item.approved ? "green" : "#aaaaaa",
                    }}
                  />
                }
                backgroundColor="transparent"
                size={Button.sizes.small}
                onPress={() => {
                  handleItemApproved(item.id, { approved: true });
                }}
              />
              <Button
                padding-0
                children={
                  <AntDesign
                    name="close"
                    size={24}
                    style={{ color: item.approved ? "#aaaaaa" : "red" }}
                  />
                }
                backgroundColor="transparent"
                size={Button.sizes.small}
                onPress={() => {
                  handleItemApproved(item.id, { approved: false });
                }}
              />
            </View>
          ) : (
            <Checkbox
              value={item.bought}
              style={styles.checkbox}
              onValueChange={() =>
                updateGroceryItem(item.id, { bought: !item.bought })
              }
            />
          )}
        </ListItem.Part>
      </ListItem>
      {!item.approved && (
        <View>
          <View centerH>
            <View height={1} backgroundColor="#e7e7e7" width={"90%"} />
          </View>
          <View paddingL-10 paddingV-15 flexS row centerV>
            <View
              style={{
                width: 25,
                aspectRatio: 1,
                borderRadius: 50,
                backgroundColor: "red",
                marginHorizontal: 10,
              }}
            ></View>
            <Text color="#858585" text70>Requested by Austin</Text>
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  checkbox:{
    borderRadius: 50,
    borderWidth: 1,
    color: "#bfbfbf",
    borderColor: "#bfbfbf",
  }
})

export default GroceryItem;