import React from "react";
import "./TermsAndConditionsModal.css";
import PropTypes from "prop-types";

export default class Modal extends React.Component {
  onClose = e => {
    this.props.onClose && this.props.onClose(e);
    this.props.activeChanged(e);
  };

  saveMidigator = e => {
    this.props.saveMidigator && this.props.saveMidigator(e);
  };

  render() {
    if (!this.props.show) {
      return null;
    }
    return (
      <div class="modal" id="modal">
        <h2>Terms and Conditions</h2>
        <div class="content">{this.props.children}</div>
        <div class="actions">
            <button class="toggle-button" onClick={this.onClose}>
              Cancel
            </button>
            <span> </span>
            <button disabled={this.props.isSavingMidigator} onClick={this.saveMidigator}>
            {this.props.isSavingMidigator ? 'Saving...' : 'Save'}
            </button>
        </div>
      </div>
    );
  }
}

Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  saveMidigator: PropTypes.func.isRequired,
  show: PropTypes.bool.isRequired,
  activeChanged: PropTypes.func.isRequired,
  isSavingMidigator: PropTypes.bool.isRequired
};