import { useState } from "react"

import {
    WrapperAddRecipe, IconPlus,
    WrapperOptions, IconOptions, WrapperOptionButtons, IconRemove, IconEdit
} from "./styles/buttons"
import { useDispatch } from "react-redux"
import { removeRecipe } from "../../../redux/slices/recipesSlice"

import { PlusIcon, WrapperAddItem } from "../../GroceryList/groceries/styles/buttons"
import ModalAddIngredients from "../../modals/recipes/ModalAddIngredients"

export const AddRecipeButton = () => {
    return (
        // < Link to="/recipes/addRecipe">
            <WrapperAddRecipe>
                <IconPlus />
            </WrapperAddRecipe>
        // </Link>
    )
}

export const AddIngredientsButton = (props) => {
    const [visible, setVisible] = useState(false)
    return (<>
        <WrapperAddItem style={{ bottom: 10 }} onClick={()=>setVisible(true)}>
            <PlusIcon />
        </WrapperAddItem>
        <ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} />
    </>
    )
}

export const OptionsButtonRecipe = (props) => {
    const dispatch = useDispatch()
    const [toggled, setToggled] = useState(false)
    const handleRemove = () => {
        if (window.confirm("Do you really want to remove this recipe?")) {
            dispatch(removeRecipe(props.id))
        }
    }
    return (
        <WrapperOptions toggled={toggled} >
            <IconOptions toggled={toggled} onClick={() => setToggled(!toggled)} />
            <WrapperOptionButtons toggled={toggled}>
                <IconRemove onClick={() => handleRemove()} />
                <IconEdit onClick={() => history.push("/recipes/addRecipe/" + props.id)} />
            </WrapperOptionButtons>
        </WrapperOptions>
    )
}