import React from "react";
import { notificationmodalwrapper } from "utils/notificationmodalwrapper";

const modalStyle = function() {
  let top = 50;
  let left = 50;

  return {
    position: "absolute",
    width: 400,
    zIndex: 1040,
    top: top + "%",
    left: left + "%",
    border: "1px solid #e5e5e5",
    backgroundColor: "white",
    boxShadow: "0 5px 15px rgba(0,0,0,.5)",
    padding: 20
  };
};

class NotificationModal extends React.Component {
  handleOpen = () => {
    this.props.onModalOpen();
  };
  handleClose = () => {
    this.props.onModalClose();
  };

  render() {
    const { modal } = this.props;

    return (
      <div>
        <button onClick={this.handleOpen}>Open Modal</button>

        <div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
          <div>
            <h4 id="modal-label">Text in a modal</h4>
            <input type="radio" name="send-option" value="Email" />
            Email
            <br />
            <input type="radio" name="send-option" value="SMS" />
            SMS <br />
            <button onClick={this.handleClose}>Close Modal</button>
          </div>
        </div>
      </div>
    );
  }
}

export default notificationmodalwrapper(NotificationModal);