cally/components/pages/grocery/EditGroceryItem.tsx

import { Text, View } from "react-native-ui-lib";
import React, { useEffect, useRef, useState } from "react";
import { TextField, TextFieldRef } from "react-native-ui-lib";
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";

interface IEditGrocery {
  id?: string;
  title: string;
  category: GroceryCategory;
  setTitle: (value: string) => void;
  setCategory?: (category: GroceryCategory) => void;
  setSubmit?: (value: boolean) => void;
  closeEdit?: (value: boolean) => 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,
    })
  );

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus(); // Focus on the TextField
    }
    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
          style={{}}
          ref={inputRef}
          placeholder="Grocery"
          value={editGrocery.title}
          onChangeText={(value) => {
            editGrocery.setTitle(value);
          }}
          onSubmitEditing={() => {
            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(false);
            }
          }}
          maxLength={25}
        />
        <CloseXIcon
          onPress={() => {
            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
          }}
        />
      </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 == GroceryCategory.None
            ? null
            : 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,
            });
            console.log("kategorija vo diropdown: " + item.value);
            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
          }
        }}
      />
    </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;