import React from 'react';
import ReactModal from 'react-modal';
import Button from './Button';
import styles from './Modal.css';

class Modal extends React.Component {
  state = { open: false, }

  onChildClick() {
    this.setState({ open: true });
  }

  closeModal() {
    this.setState({ open: false });
  }

  onCancel() {
    this.closeModal();
  }

  onActionClick() {
    const { props: childProps } = this.props.children;
    this.closeModal();
    childProps.onClick();
  }

  render() {
    const { children, action } = this.props;
    const { open } = this.state;

    return (
      <div>
        {React.cloneElement(children, { onClick: this.onChildClick.bind(this) })}
        <ReactModal
          className={styles.content}
          overlayClassName={styles.overlay}
          isOpen={open}
          onRequestClose={this.onCancel.bind(this)}
        contentLabel='Confirm action'
        >
          <div className={styles.innerContent}>
            <h3>{`Are you sure you want to ${action}?`}</h3>
            <Button primary onClick={this.onActionClick.bind(this)}>Yes</Button>
            <Button secondary onClick={this.onCancel.bind(this)}>Cancel</Button>
          </div>
        </ReactModal>
      </div>
    );
  }
}

export default Modal;

@@ -186,24 +186,239 @@
 : false, %7D%0A%0A
+  static propTypes = %7B%0A    children: React.PropTypes.shape(%7B%0A      props: React.PropTypes.shape(%7B%0A        onClick: React.PropTypes.func.isRequired%0A      %7D)%0A    %7D),%0A    action: React.PropTypes.string.isRequired%0A  %7D%0A%0A
   onChildCli
@@ -420,24 +420,24 @@
 ldClick() %7B%0A
-
     this.set
@@ -755,41 +755,8 @@
 ops;
-%0A    const %7B open %7D = this.state;
 %0A%0A  
@@ -961,16 +961,16 @@
 verlay%7D%0A
-
         
@@ -979,16 +979,27 @@
 isOpen=%7B
+this.state.
 open%7D%0A  

Add prop types for Modal