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




const Modal = ({
  onClose, confirmButtonText, onConfirm, modalContent,
}) => {
 
  
  React.useEffect(() => {
    const onKeyDown = (e) => {
      e.code === "Escape" && onClose();
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown)
  }
  , []);
  
  return (
    <div className="modal_wrapper">
      <div className="modal_overlay" onClick={onClose}> </div>
      <div className="modal">
        <button className = "modal_btn" onClick ={onClose}> X </button>
        <div className = "modal_content">
          { modalContent}
        </div>
        <div className = "modal_buttons">
          <button className= "modal_confirm" onClick={onConfirm}> {confirmButtonText}</button>
        </div>
      </div>
    </div>
  )
}

const App = () => {
  const offers = [ 
    {
      id: 0,
      btnText: "Show Offer 1",
      text: "Offer 1 accepted",
    },
    {
      id: 1,
      btnText: "Show Offer 2",
      text: "Offer 2 accepted", 
    },
  
  ]
  
  const [open, setOpen] = React.useState(false);
  const [accepted, setAccepted] = React.useState([false, false]);
  const [currentOffer, setOffer] = React.useState(-1);
  
  const onClose = () => {
    setOpen(false);
  }
  
  const onAccept = () => {
    console.log({
      accepted,
      currentOffer,
    });
    setOpen(false);
    accepted[currentOffer] = true;
    setAccepted([...accepted]);  
  }
 
  const showModal = (id) => {
    setOpen(true);
    setOffer(id);
  }
 
  
  return (
    <>
      {
        offers.map(({
          id, btnText, text,
        }) =>  <> {!accepted[id] ? <button onClick= {() => showModal(id)}>{btnText}</button> :  text }</>)
      }
      { open && <Modal 
        onClose = {onClose}
        confirmButtonText ={"Accept"}
        onConfirm ={onAccept}
        modalContent ={"Click the button to get amazing offers"}
      /> }
    </>
  )
  
}

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