import { StyleSheet } from "react-native";
import React, { useState } from "react";
import {
  Button,
  Colors,
  Dialog,
  Drawer,
  Text,
  View,
  PanningProvider,
} from "react-native-ui-lib";
import { useGroceryContext } from "@/contexts/GroceryContext";
import { FontAwesome6 } from "@expo/vector-icons";
interface AddGroceryItemProps {
  visible: boolean;
  onClose: () => void;
}
const AddGroceryItem = () => {
  const { isAddingGrocery, setIsAddingGrocery } = useGroceryContext();
  const [visible, setVisible] = useState<boolean>(false);

  const handleShowDialog = () => {
    setVisible(true);
  };
  const handleHideDialog = () => {
    setVisible(false);
  };
  return (
    <View
      row
      spread
      paddingH-25
      style={{
        position: "absolute",
        bottom: 20,
        width: "100%",
        height: 60,
      }}
    >
      <View style={styles.btnContainer} row>
        <Button
          color="white"
          backgroundColor="#fd1775"
          label="Add item"
          text70L
          iconSource={() => <FontAwesome6 name="add" size={18} color="white" />}
          style={styles.finishShopBtn}
          enableShadow
          onPress={() => {setIsAddingGrocery(true)}}
        />
      </View>
    </View>
  );
};

export default AddGroceryItem;

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
  },
  inner: {
    paddingHorizontal: 20,
    display: "flex",
    flexDirection: "column",
  },
  title: {
    fontSize: 20,
    fontWeight: "400",
    textAlign: "center",
  },
  divider: {
    width: "100%",
    height: 1,
    backgroundColor: "#E0E0E0",
    marginVertical: 10,
  },
  btnContainer: {
    width: "100%",
    justifyContent: "center",
  },
  finishShopBtn: {
    width: "100%",
  },
  shoppingBtn: {
    flex: 1,
    marginHorizontal: 3,
  },
});