import * as React from "react";

export const SelectContext = React.createContext(undefined);

export function SelectProvider({children}) {
    const [selected, setSelected] = React.useState({
        cocktail: null,
        ingredient: null
    });

    const selectCocktail = (row) => {
        setSelected((prev) => ({
            ...prev,
            cocktail: row
        }))
    }
    const getCocktail = () => {
        return selected.cocktail
    }
    const getOpenCocktail = () => {
        return selected.cocktail !== null;
    }
    const closeCocktail = () => {
        setSelected((prevState) => ({
            ...prevState,
            cocktail: null,
        }))
    }

    const selectIngredient = (row) => {
        setSelected((prev) => ({
            ...prev,
            ingredient: row
        }))
    }
    const closeIngredient = () => {
        setSelected((prevState) => ({
            ...prevState,
            ingredient: null
        }))
    }
    const getIngredient = () => {
        return selected.ingredient
    }
    const getOpenIngredient = () => {
        return selected.ingredient !== null
    }

    return <SelectContext.Provider value={{...selected,
        selectCocktail,
        getCocktail,
        getOpenCocktail,
        closeCocktail,
        selectIngredient,
        closeIngredient,
        getIngredient,
        getOpenIngredient
    }}>{children}</SelectContext.Provider>;
}

export const SelectConsumer = SelectContext.Consumer;