cally/components/pages/grocery/GroceryList.tsx

import { ActivityIndicator, Dimensions, FlatList, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import GroceryItem from "./GroceryItem";
import { useGroceryContext } from "@/contexts/GroceryContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { AntDesign } from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
import Ionicons from '@expo/vector-icons/Ionicons';
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import { REPEAT_TYPE } from "@/hooks/firebase/types/todoData";
import { ToDosContextProvider } from "@/contexts/ToDosContext";

const shoppingTodo = {
    id: "",
    title: "Go shopping",
    points: 10,
    date: new Date(),
    rotate: false,
    repeatType: REPEAT_TYPE.NONE,
    assignees: [],
    repeatDays: []
};

const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
    const {
        groceries,
        updateGroceryItem,
    } = useGroceryContext();

    const [approvedGroceries, setApprovedGroceries] = useState<IGrocery[]>(
        groceries?.filter((item) => item.approved)
    );
    const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
        groceries?.filter((item) => !item.approved)
    );

    const [pendingVisible, setPendingVisible] = useState<boolean>(true);
    const [approvedVisible, setApprovedVisible] = useState<boolean>(true);
    const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);

    // Group approved groceries by category
    let approvedGroceriesByCategory = approvedGroceries?.reduce(
        (groups: any, item: IGrocery) => {
          let category = item.category || "Uncategorized";
          if (item.bought) {
              category = "Done";
          }
          if (!groups[category]) {
            groups[category] = [];
          }
          groups[category].push(item);
          
          // Sort items within each category - bought items at bottom
          groups[category].sort((a: IGrocery, b: IGrocery) => {
            if (a.bought === b.bought) return 0;
            return a.bought ? 1 : -1;
          });
          
          return groups;
        },
        {}
      );

    useEffect(() => {
        setApprovedGroceries(groceries?.filter((item) => item.approved));
        setPendingGroceries(groceries?.filter((item) => !item.approved));
    }, [groceries]);

    return (
        <>
            {!groceries &&
                <View style={styles.loaderContainer}>
                    <ActivityIndicator size="large" color="grey" />
                </View>
            }
            <View marginH-20 marginB-45>
                <HeaderTemplate
                    message={"Welcome to your grocery list"}
                    isWelcome={false}
                    isGroceries={true}
                >
                    <View row centerV>
                        <View
                            paddingH-15
                            paddingV-8
                            centerV
                            style={{borderRadius: 50}}
                        >
                            <Text text70BL color="#46a80a" style={styles.counterText}>
                                {approvedGroceries?.length} list{" "}
                                {approvedGroceries?.length === 1 ? (
                                    <Text text70BL color="#46a80a" style={styles.counterText}>
                                        item
                                    </Text>
                                ) : (
                                    <Text text70BL color="#46a80a" style={styles.counterText}>
                                        items
                                    </Text>
                                )}
                            </Text>
                        </View>
                        <View
                            padding-8
                            paddingH-12
                            marginR-15
                            style={{borderRadius: 50}}
                        >
                            <Text text70 style={styles.counterText} color="#e28800">
                                {pendingGroceries?.length} pending
                            </Text>
                        </View>
                        <TouchableOpacity onPress={() => setChoreDialogVisible(true)}>
                            <Ionicons name="person-add-outline" size={24} color="grey" />
                        </TouchableOpacity>
                        <ToDosContextProvider>
                            {choreDialogVisible &&
                                <AddChoreDialog
                                    isVisible={choreDialogVisible}
                                    setIsVisible={setChoreDialogVisible}
                                    selectedTodo={shoppingTodo}
                                    isShoppingTodo
                                />
                            }
                        </ToDosContextProvider>
                    </View>
                </HeaderTemplate>

                {/* Pending Approval Section */}
                <View row spread marginT-40 marginB-10 centerV>
                    <View row centerV>
                        <TouchableOpacity row centerV onPress={() => {setPendingVisible(!pendingVisible)}}>
                        <Text style={styles.subHeader}>Pending Approval</Text>
                        {pendingVisible && (
                            <AntDesign
                            name="down"
                            size={17}
                            style={styles.dropIcon}
                            color="#9f9f9f"
                            />
                        )}
                        {!pendingVisible && (
                            <AntDesign
                                name="right"
                                size={15}
                                style={styles.dropIcon}
                                color="#9f9f9f"
                                />
                            )}
                        </TouchableOpacity>
                    </View>
                    <View
                        centerV
                        style={{
                            aspectRatio: 1,
                            width: 35,
                            backgroundColor: "#faead2",
                            borderRadius: 50,
                        }}
                    >
                        <Text style={styles.counterNr} center color="#e28800">
                            {pendingGroceries?.length.toString()}
                        </Text>
                    </View>
                </View>
                {pendingGroceries?.length > 0
                    ? pendingVisible && (
                    <FlatList
                        data={pendingGroceries}
                        renderItem={({item}) => (
                            <GroceryItem
                                item={item}
                                handleItemApproved={(id, changes) =>
                                    updateGroceryItem({...changes, id: id})
                                }
                                onInputFocus={onInputFocus}
                            />
                        )}
                        keyExtractor={(item) => item.id.toString()}
                    />
                )
                    : pendingVisible && (
                    <Text style={styles.noItemTxt}>No items pending approval.</Text>
                )}

                {/* Approved Section */}
                <View row spread marginT-40 marginB-0 centerV>
                    <View row centerV>
                        <TouchableOpacity row centerV onPress={() => {setApprovedVisible(!approvedVisible)}}>
                        <Text style={styles.subHeader}>Shopping List</Text>
                        {approvedVisible && (
                            <AntDesign
                                name="down"
                                size={17}
                                style={styles.dropIcon}
                                color="#9f9f9f"
                            />
                        )}
                        {!approvedVisible && (
                            <AntDesign
                                name="right"
                                size={15}
                                style={styles.dropIcon}
                                color="#9f9f9f"
                            />
                        )}
                        </TouchableOpacity>
                    </View>
                    <View
                        centerV
                        style={{
                            aspectRatio: 1,
                            width: 35,
                            backgroundColor: "#e2eed8",
                            borderRadius: 50,
                        }}
                    >
                        <Text style={styles.counterNr} center color="#46a80a">
                            {approvedGroceries?.length.toString()}
                        </Text>
                    </View>
                </View>
                <View style={{marginTop: 8}}>
                    <EditGroceryItem
                        onInputFocus={onInputFocus}
                    />
                </View>

                {/* Render Approved Groceries Grouped by Category */}
                {approvedGroceries?.length > 0
                    ? approvedVisible && (
                    <FlatList
                        data={Object.keys(approvedGroceriesByCategory).sort((a, b) => {
                            if (a !== "Done") return -1;
                            if (b === "Done") return 1;
                            return 0;
                        })}
                        renderItem={({item: category}) => (
                            <View key={category}>
                                {/* Render Category Header */}
                                <Text text80M style={{marginTop: 10}} color="#666">
                                    {category}
                                </Text>
                                {/* Render Grocery Items for this Category */}
                                {approvedGroceriesByCategory[category].map(
                                    (grocery: IGrocery) => (
                                        <GroceryItem
                                            key={grocery.id}
                                            item={grocery}
                                            handleItemApproved={(id, changes) =>
                                                updateGroceryItem({...changes, id: id})
                                            }
                                            onInputFocus={onInputFocus}
                                            approvedGroceries={approvedGroceries}
                                            setApprovedGroceries={setApprovedGroceries}
                                        />
                                    )
                                )}
                            </View>
                        )}
                        keyExtractor={(category) => category}
                    />
                )
                    : approvedVisible && (
                    <Text style={styles.noItemTxt}>No approved items.</Text>
                )}
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    dropIcon: {
        marginHorizontal: 10,
    },
    noItemTxt: {
        fontFamily: "Manrope_400Regular",
        fontSize: 14,
    },
    counterText: {
        fontSize: 14,
        fontFamily: "PlusJakartaSans_600SemiBold",
    },
    subHeader: {
        fontSize: 15,
        fontFamily: "Manrope_700Bold",
    },
    counterNr: {
        fontFamily: "PlusJakartaSans_600SemiBold",
        fontSize: 14
    },
    loaderContainer: {
        ...StyleSheet.absoluteFillObject,
        justifyContent: 'center',
        alignItems: 'center',
        height: Dimensions.get("window").height,
        width: Dimensions.get("window").width,
        backgroundColor: 'rgba(218,217,217,0.6)',
        zIndex: 999,
    },
});

export default GroceryList;