/*
* https://frontendeval.com/questions/modal-overlay
*
* Build a modal control and overlay
*/

const Modal = () => {
  const [show, setShow] = React.useState(false);
  const [accepted, setAccepted] = React.useState(false);
  
  handleClick = () => {
    setShow(show => !show);
  }
  
  handleOutsideClick = (e ) => {
    if (show && e.target.className === 'modal__container') { setShow(false); }
  }
  
  handleAccepted = () => {
    setShow(false);
    setAccepted(true);
  }
  
  return (
    <div className='modal__container' onClick={ handleOutsideClick }>
      <div className='modal__wrapper'>
        { (!show && !accepted) && <button onClick={ handleClick }>Show Offer</button> }
        { show && (
          <div className='modal__content'>
            <div className='modal__content__header'>
              <button onClick={ handleClick }>X</button>
            </div>
            <h4>Click the button below to accept our amazing offer!</h4>
            <button onClick={ handleAccepted }>Accept Offer</button>
          </div>
        )}
        { accepted && <h4>Offer accepted</h4>}
      </div>
    </div>
  )
}

const App = () => {
  return <Modal />
}

ReactDOM.render(<App />, document.getElementById('app'));