import {
  View,
  Text,
  Button,
  TouchableOpacity,
  Checkbox,
} 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 { TextInput } from "react-native";
import EditGroceryItem from "./EditGroceryItem";

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 handleTitleChange = (newTitle: string) => {
    updateGroceryItem(item.id, { title: newTitle });
  };

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

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

  return (
    <ListItem
      style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
      backgroundColor="white"
      centerV
      padding-0
      onPress={() => {
        setOpenFreqEdit(true);
      }}
    >
      <EditGroceryFrequency
        visible={openFreqEdit}
        key={item.id}
        item={item}
        onClose={() => {
          setOpenFreqEdit(false);
        }}
      />
      <ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
        {/* <View
          height={50}
          width={50}
          style={{ borderRadius: 15 }}
          backgroundColor="#e6f1ed"
          marginR-10
          children={
            <MaterialCommunityIcons
              name={iconMapping[item.category]}
              size={50}
              color="orange"
            />
          }
        />*/}
        {!isEditingTitle ? (
          <View>
            <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
              <Text text70BL>{item.title}</Text>
            </TouchableOpacity>
           { /*
            <TextInput
              value={item.title}
              onChangeText={handleTitleChange}
              onBlur={() => {
                setIsEditingTitle(false);
                console.log(groceries);
              }}
              autoFocus
              style={{
                fontSize: 16,
                padding: 0,
                margin: 0,
                fontWeight: "bold",
              }}
            />
            */}
          </View>
        ) : (
          <EditGroceryItem
            title={item.title}
            setTitle={handleTitleChange}
            setCategory={handleCategoryChange}
          />
        )}
      </ListItem.Part>
      <ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
        {!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}
            color={"#f58749"}
            onValueChange={() =>
              updateGroceryItem(item.id, { bought: !item.bought })
            }
          />
        )}
      </ListItem.Part>
    </ListItem>
  );
};

export default GroceryItem;
