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

function ModalOverlay(props) {
  const { closeModal, acceptOffer } = props;

  const handleOutsideClick = (e) => {
    if (e?.target?.id === "modal-box-wrapper") {
      closeModal(false);
    }
  };

  const handleAcceptOffer = () => {
    acceptOffer(true);
  };
  return (
    <div
      className="modal-wrapper align-center"
      id="modal-box-wrapper"
      onClick={handleOutsideClick}
    >
      <div className="modal-container " id="modal-box">
        <div id="modal-close-button">
          <button
            onClick={() => {
              closeModal(false);
            }}
          >
            Close
          </button>
        </div>
        <div>Click the button below to accept amazing offer!</div>
        <div className="align-center full-width" id="modal-accept-button">
          <button onClick={handleAcceptOffer}>Accept Offer</button>
        </div>
      </div>
    </div>
  );
}


const App = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const [isOfferAccepted, setIsOfferAccepted] = React.useState(false);

  const handleAceeptOffer = (isAccepted) => {
    if (isAccepted) {
      setIsModalOpen(false);
      setIsOfferAccepted(true);
    } else {
      setIsModalOpen(false);
    }
  };
  return (
    <div className="App">
      {!isOfferAccepted && (
        <div className="button-wrapper">
          <button
            onClick={() => {
              setIsModalOpen(!isModalOpen);
            }}
          >
            Show Offer
          </button>
        </div>
      )}
      {isModalOpen && (
        <ModalOverlay
          closeModal={setIsModalOpen}
          acceptOffer={handleAceeptOffer}
        />
      )}
      {isOfferAccepted && (
        <div className="button-wrapper">
          <div>Offer Accepted</div>
        </div>
      )}
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('app'));