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

const Modal = ({ isOpen, onClose, children }) => {
  
  const ref = React.useRef(null);
  
  React.useEffect(()=>{
    const onKeyDown = (e) => {
      if(e.keyCode === 27) {
        onClose()
      }
    }
    if(ref.current) {
      ref.current.focus()
      ref.current.addEventListener('keydown', onKeyDown);
    }
    
    return () => ref.current && ref.current.removeEventListener('keydown', onKeyDown);
  }, [ref])
  
  return (
    <div className="modal modal-backdrop" onClick={onClose} ref={ref} tabIndex={'-1'}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <i onClick={onClose}>x</i>
        </div>
        {children}
      </div>
    </div>
  );
};

const App = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const [selectedOffer, setSelectedOffer] = React.useState("");

  const [acceptedOffer, setAcceptedOffer] = React.useState("");

  const OFFERS = [
    { id: "offer1", label: "offer one" },
    { id: "offer2", label: "offer two" }
  ];

  const onCtaClick = (offer) => {
    setSelectedOffer(offer);
    setIsModalOpen(true);
  };

  const GenericModalContent = ({
    message = "Click the button below to accept our amazing offer!",
    offer
  }) => {
    const onCtaClick = () => {
      setAcceptedOffer(offer);
      setIsModalOpen(false);
    };

    const ctaLabel = `Accept ${offer.label}`;

    return (
      <>
        <p>{message}</p>
        <button onClick={onCtaClick}>{ctaLabel}</button>
      </>
    );
  };

  const getModalContent = (offer) => {
    const map = {
      offer1: <GenericModalContent offer={offer} />,
      offer2: <GenericModalContent offer={offer} />
    };

    return map[offer.id];
  };

  return (
    <main>
      {OFFERS.map(({ id, label }) => {
        const isOfferAccepted = id === acceptedOffer.id;
        const ctaLabel = `${isOfferAccepted ? "Accepted" : "Show"} ${label}`;
        return (
          <button
            onClick={() => onCtaClick({ id, label })}
            disabled={isOfferAccepted}
          >
            {ctaLabel}
          </button>
        );
      })}

      {isModalOpen && (
        <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
          {getModalContent(selectedOffer)}
        </Modal>
      )}
    </main>
  );
};

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