import React, { useContext, useState } from 'react'

function Message () {
  const { message, hide } = useContext(MessageContext)
  const showMessage = Boolean(message)
  return showMessage ? (
    <div className="banner-feature show">
      <div className="banner-feature__content">
        { message }
      </div>
      <div className="banner-feature__close" onClick={ e => hide() }/>
    </div>
  ) : null
}

const defaultContext = {
  message: null,

  show: () => console.log('Show message'),
  hide: () => console.log('Hide message')
}

const MessageContext = React.createContext(defaultContext)

function MessageProvider () {

  function show (message) {
    setMessage(message)
  }

  function hide () {
    setMessage(null)
  }

  const initialState = {
    message: null,

    show,
    hide
  }

  const [message, setMessage] = useState(initialState)

  return (
    <MessageContext.Provider value={ message }>
      <Message />
    </MessageContext.Provider>
  )
}

export { MessageProvider, MessageContext }