import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib";
import React, { useState } from "react";
import { AntDesign } from "@expo/vector-icons";
import { useGroceryContext } from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency";
import EditGroceryItem from "./EditGroceryItem";
import { ImageBackground, StyleSheet } from "react-native";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { useGetUserById } from "@/hooks/firebase/useGetUserById";
import { useDeleteGrocery } from "@/hooks/firebase/useDeleteGrocery";

const GroceryItem = ({
  item,
  handleItemApproved,
  onInputFocus,
  approvedGroceries,
  setApprovedGroceries
}: {
  item: IGrocery;
  handleItemApproved: (id: string, changes: Partial<IGrocery>) => void;
  onInputFocus: (y: number) => void;
  approvedGroceries?: Array<IGrocery>,
  setApprovedGroceries?: Function
}) => {
  const { updateGroceryItem } = useGroceryContext();
  const { mutateAsync: deleteGrocery } = useDeleteGrocery();
  const { profileData } = useAuthContext();
  const { data: creator } = useGetUserById(item.creatorId);
  const isParent = profileData?.userType === ProfileType.PARENT;
  const isCaregiver = profileData?.userType === ProfileType.CAREGIVER;

  const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
  const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);

  const closeEdit = () => setIsEditingTitle(false);

  const getInitials = (firstName: string, lastName: string) => {
    return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
  };

  const isEditable = (isParent || isCaregiver) && item.approved && !item.bought;
  return (
    <View
      key={item.id}
      style={{
        borderRadius: 17,
        marginVertical: 5,
        backgroundColor: item.bought ? "#cbcbcb" : "white",
        overflow: "hidden",
      }}
    >
      <TouchableOpacity onPress={isEditable ? () => setIsEditingTitle(true) : null}>
        <View
          row
          spread
          centerV
          style={{
            paddingHorizontal: isEditingTitle ? 0 : 13,
            paddingVertical: isEditingTitle ? 0 : 10,
            minHeight: 44.64,
          }}
        >
          <EditGroceryFrequency
            visible={openFreqEdit}
            key={item.id}
            item={item}
            onClose={() => setOpenFreqEdit(false)}
          />
          {isEditingTitle ? (
            <EditGroceryItem
              editGrocery={item}
              onInputFocus={onInputFocus}
              closeEdit={closeEdit}
            />
          ) : (
            <View flex>
              {(isParent || isCaregiver) && !item.bought ? (
                  <Text
                    text70T
                    style={[
                      styles.title,
                      {
                        textDecorationLine: item.bought ? "line-through" : "none",
                      },
                    ]}
                  >
                    {item.title}
                  </Text>
              ) : (
                <Text
                  text70T
                  style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
                >
                  {item.title}
                </Text>
              )}
            </View>
          )}

          {!item.approved ? (
            <View row centerV>
              {(isParent || isCaregiver) && (
                <>
                  <AntDesign
                    name="check"
                    size={24}
                    style={{ color: "blue", marginRight: 15 }}
                    onPress={() =>
                      handleItemApproved(item.id, { approved: true })
                    }
                  />
                  <AntDesign
                    name="close"
                    size={24}
                    style={{ color: "red" }}
                    onPress={() => {
                      handleItemApproved(item.id, { approved: false });
                      deleteGrocery(item.id);
                    }}
                  />
                </>
              )}
            </View>
          ) : (
            !isEditingTitle &&
            (isParent || isCaregiver) && (
                <View row>
                  {item.bought &&
                      <AntDesign
                        name="close"
                        size={24}
                        style={{ color: "grey", marginRight: 10 }}
                        onPress={() => deleteGrocery(item.id)}
                      />
                  }
                  <Checkbox
                    value={item.bought}
                    containerStyle={[styles.checkbox, { borderRadius: 50 }]}
                    style={styles.checked}
                    borderRadius={50}
                    color="#fd1575"
                    hitSlop={20}
                    onValueChange={() => {
                      const updatedApprovedGroceries = approvedGroceries.map((grocery) => grocery.id === item.id ? {...grocery, bought: !item.bought} : grocery);
                      setApprovedGroceries(updatedApprovedGroceries);
                      updateGroceryItem({ id: item.id, bought: !item.bought })
                    }}
                  />
                </View>
            )
          )}
        </View>
      </TouchableOpacity>

      {!item.approved && (
        <>
          <View paddingH-20>
            <View height={0.7} backgroundColor="#e7e7e7" width="100%" />
          </View>
          <View
            row
            centerV
            style={{
              paddingHorizontal: 13,
              paddingVertical: 10,
            }}
          >
            {creator?.pfp ? (
              <ImageBackground
                source={{ uri: creator.pfp }}
                style={{
                  height: 24.64,
                  aspectRatio: 1,
                  borderRadius: 22,
                  overflow: "hidden",
                  borderWidth: 2,
                  borderColor: creator.eventColor || undefined,
                  marginRight: 8,
                }}
              />
            ) : (
              <View
                style={{
                  width: 24.64,
                  aspectRatio: 1,
                  marginRight: 8,
                  backgroundColor: creator?.eventColor || "gray",
                  borderRadius: 100,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <Text
                  style={{ color: "#fff", fontSize: 12, fontWeight: "bold" }}
                >
                  {creator
                    ? getInitials(creator.firstName, creator.lastName)
                    : ""}
                </Text>
              </View>
            )}
            <Text color="#858585" style={styles.authorTxt}>
              Requested by {creator?.firstName}
            </Text>
          </View>
        </>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  authorTxt: {
    fontFamily: "Manrope_500Medium",
    fontSize: 12,
  },
  checkbox: {
    borderRadius: 50,
    borderWidth: 0.7,
    color: "#bfbfbf",
    borderColor: "#bfbfbf",
    width: 24.64,
    aspectRatio: 1,
  },
  title: {
    fontFamily: "Manrope_500Medium",
    fontSize: 15,
  },
  checked: {
    borderRadius: 50,
  },
});

export default GroceryItem;
