cally/components/pages/grocery/EditGroceryItem.tsx

import {Text, TextField, TextFieldRef, View} from "react-native-ui-lib";
import React, {useEffect, useRef} from "react";
import {GroceryCategory, useGroceryContext} from "@/contexts/GroceryContext";
import {Dropdown} from "react-native-element-dropdown";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import {StyleSheet} from "react-native";
import DropdownIcon from "@/assets/svgs/DropdownIcon";
import {AntDesign} from "@expo/vector-icons";

interface IEditGrocery {
    id?: string;
    title: string;
    category: GroceryCategory;
    setTitle: (value: string) => void;
    setCategory?: (category: GroceryCategory) => void;
    setSubmit?: (value: boolean) => void;
    closeEdit?: () => void;
    handleEditSubmit?: Function;
}


const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
    const {fuzzyMatchGroceryCategory} = useGroceryContext();
    const inputRef = useRef<TextFieldRef>(null);

    const groceryCategoryOptions = Object.values(GroceryCategory).map(
        (category) => ({
            label: category,
            value: category,
        })
    );

    const handleSubmit = () => {
        inputRef?.current?.blur()
        console.log("CALLLLLL")
        if (editGrocery.setSubmit) {
            editGrocery.setSubmit(true);
        }
        if (editGrocery.handleEditSubmit) {
            editGrocery.handleEditSubmit({
                id: editGrocery.id,
                title: editGrocery.title,
                category: editGrocery.category,
            });
        }
        if (editGrocery.closeEdit) {
            editGrocery.closeEdit();
        }
    }

    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.focus();
        }

        console.log(editGrocery.category);
    }, []);

    return (
        <View
            style={{
                backgroundColor: "white",
                width: "100%",
                borderRadius: 25,
                paddingHorizontal: 13,
                paddingVertical: 10,
                marginTop: 0,
            }}
        >
            <View row spread centerV>
                <TextField
                    text70T
                    ref={inputRef}
                    placeholder="Grocery"
                    value={editGrocery.title}
                    onSubmitEditing={handleSubmit}
                    numberOfLines={1}
                    returnKeyType="done"
                    onChangeText={(value) => {
                        editGrocery.setTitle(value);
                        let groceryCategory = fuzzyMatchGroceryCategory(value);
                        if (editGrocery.setCategory) {
                            editGrocery.setCategory(groceryCategory);
                        }
                    }}
                    maxLength={25}
                />
                <View row centerV>
                    <AntDesign
                        name="check"
                        size={24}
                        style={{
                            color: "green",
                            marginRight: 15,
                        }}
                        onPress={handleSubmit}
                    />
                    <CloseXIcon
                        onPress={() => {
                            if (editGrocery.closeEdit) {
                                editGrocery.closeEdit();
                            }
                        }}
                    />
                </View>
            </View>
            <Dropdown
                style={{marginTop: 15}}
                data={groceryCategoryOptions}
                placeholder="Select grocery category"
                placeholderStyle={{color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2}}
                labelField="label"
                valueField="value"
                value={
                    editGrocery.category
                }
                iconColor="white"
                activeColor={"#fd1775"}
                containerStyle={styles.dropdownStyle}
                itemTextStyle={styles.itemText}
                itemContainerStyle={styles.itemStyle}
                selectedTextStyle={styles.selectedText}
                renderLeftIcon={() => (
                    <DropdownIcon style={{marginRight: 8}}
                                  color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"}/>
                )}
                renderItem={(item) => {
                    return (
                        <View height={36.02} centerV>
                            <Text style={styles.itemText}>{item.label}</Text>
                        </View>
                    );
                }}
                onChange={(item) => {
                    if (editGrocery.handleEditSubmit) {
                        editGrocery.handleEditSubmit({
                            id: editGrocery.id,
                            category: item.value,
                        });
                        if (editGrocery.closeEdit) editGrocery.closeEdit();
                    } else {
                        if (editGrocery.setCategory) {
                            editGrocery.setCategory(item.value);
                        }
                    }
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    itemText: {
        fontFamily: "Manrope_400Regular",
        fontSize: 15.42,
        paddingLeft: 15,
    },
    selectedText: {
        fontFamily: "Manrope_500Medium",
        fontSize: 13.2,
        color: "#fd1775",
    },
    dropdownStyle: {borderRadius: 6.61, height: 115.34, width: 187},
    itemStyle: {padding: 0, margin: 0},
});

export default EditGroceryItem;