import {Dimensions, StyleSheet} from "react-native";
import React from "react";
import {Button, View,} from "react-native-ui-lib";
import {useGroceryContext} from "@/contexts/GroceryContext";
import {FontAwesome6} from "@expo/vector-icons";
import PlusIcon from "@/assets/svgs/PlusIcon";

const { width } = Dimensions.get("screen");

const AddGroceryItem = () => {
    const {setIsAddingGrocery} = useGroceryContext();

    return (
        <View
            row
            spread
            paddingH-20
            style={{
                position: "absolute",
                bottom: 15,
                width: "100%",
                height: 53.26,
            }}
        >
            <View style={styles.btnContainer} row>
                <Button
                    color="white"
                    backgroundColor="#fd1775"
                    label="Add item"
                    text70L
                    iconSource={() => <PlusIcon />}
                    style={styles.finishShopBtn}
                    labelStyle={styles.addBtnLbl}
                    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: {
        position:"absolute",
        bottom: 30,
        width: width,
        padding: 20,
        paddingBottom: 0,
        justifyContent: "center",
        alignItems:"center",
        zIndex: 10,
    },
    finishShopBtn: {
        width: "100%",
        height: 53.26,
    },
    shoppingBtn: {
        flex: 1,
        marginHorizontal: 3,
    },
    addBtnLbl: {fontFamily: "Manrope_500Medium", fontSize: 17, marginLeft: 5},
});