import React, {useState, useRef }  from 'react'
import { Button } from 'react-bootstrap'
import Popover from 'react-bootstrap/Popover'
import Overlay from 'react-bootstrap/Overlay'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

/**
 * 
 * @param {buttonIcon} string : name of the icon. (font-awesome)
 * @returns 
 */
const PopoverController =  ({children, title, buttonIcon, buttonAdditionalClasses, postion=PopoverDirection.LEFT}) => {
    
    const [show, setShow] = useState(false);
    const [target, setTarget] = useState(null);
    const ref = useRef(null);
    
    const handleClick = (event) => {
        setShow(!show)
        setTarget(event.target)
    }

    return (
        <div ref={ref}>
            <Button variant="outline"  className={buttonAdditionalClasses}
                onClick={handleClick}>
                <FontAwesomeIcon
                    icon={buttonIcon} 
                    />
            </Button>
            <Overlay
                show={show}
                target={target}
                placement={postion}
                container={ref.current}
                containerPadding={5}
                >
                <Popover id="popover-contained">
                    <Popover.Title as="h3">{title}</Popover.Title>
                    <Popover.Content>
                        {children}
                    </Popover.Content>
                </Popover>
            </Overlay>
        </div>
    )
}

const PopoverDirection = {
    LEFT: "left",
    RIGHT: "right",
}

export { PopoverController, PopoverDirection}