import React, { useState, createContext } from "react"
import Button from "../button"

function usePopover() {
  const [active, setActive] = useState(false)

  return {
    active,
    show: () => setActive(true),
    hide: () => setActive(false),
    toggle: () => setActive(!active),
  }
}

function PopoverButton({ children, ...props }) {
  return <Button {...props}>{children}</Button>
}

export { PopoverButton }

export function PopoverContent({ children }) {
  return children
}

const PopoverContext = createContext({})

function Popover({ popover: providedPopover, children }) {
  const internalPopover = usePopover()
  const popover = providedPopover || internalPopover

  return (
    <PopoverContext.Provider value={popover}>
      {children}
    </PopoverContext.Provider>
  )
}

export default {
  __esModule: true,
  PopoverButton,
  PopoverContent,
  usePopover,
  default: Popover,
}
