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

import React, { useEffect, useState }  from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";



const Overlay = ({ open, setOpen, setOfferAccept }) => {
  return (
    <div className="overlay">
      <p className="cross" onClick={() => setOpen((open) => !open)}>
        X
      </p>
      <p>Click the button below to accept an amazing offer</p>
      <p>
        <button
          onClick={() => {
            setOfferAccept(true);
            setOpen((open) => !open);
          }}
        >
          Accept offer
        </button>
      </p>
    </div>
  );
};

const Backdrop = ({ setOpen }) => {
  return (
    <div
      onClick={() => setOpen((open) => !open)}
      className="backdrop"
    ></div>
  );
};

const Modal = () => {
  const [open, setOpen] = useState(false);
  const [offerAccept, setOfferAccept] = useState(false);
  return (
    <>
      {!offerAccept && !open && (
        <div className="modal">
          <button onClick={() => setOpen(true)}>Show offer</button>
        </div>
      )}
      {offerAccept && (
        <div className="offer">
          Offer Accepted
          <button
            onClick={() => {
              setOpen(false);
              setOfferAccept(false);
            }}
          >
            Reset
          </button>
        </div>
      )}
      {open && <Backdrop setOpen={setOpen} />}
      {open && (
        <Overlay
          open={open}
          setOpen={setOpen}
          setOfferAccept={setOfferAccept}
        />
      )}
   </>
  );
};
ReactDOM.render(<Modal />, document.getElementById('app'));