import {useState, PropsWithChildren} from "react"
import {PopupContext} from "../contexts"
import {Popup} from "../molecules"
import {PopupProps, IPopup} from "../props"

export const PopupProvider = ({children}: PropsWithChildren) => {
  const [popup, setPopup] = useState<IPopup>({
    children: null,
    message: "",
    title: "",
    heading: "",
  })

  const togglePopup = (content?: IPopup) => setPopup(content ? content : {children: null})

  const value: PopupProps = {popup, togglePopup}

  return (
    <PopupContext.Provider value={value}>
      <Popup />
      {children}
    </PopupContext.Provider>
  )
}