import React from 'react';
import Button from './Button';
import cx from 'classnames';

export default class Modal extends React.Component {
  static propTypes: {
    header: React.PropTypes.string,
    fixedFooter: React.PropTypes.bool,
    bottomSheet: React.PropTypes.bool
  }

  render() {
    var {header, children, fixedFooter, bottomSheet, ...props} = this.props;
    var style = {
      display: 'block',
      position: 'fixed',
      top: '10%',
      opacity: 1,
      zIndex: 1050
    };
    var classes = {modal: true};
    classes['modal-fixed-footer'] = this.props.fixedFooter;
    classes['bottom-sheet'] = this.props.bottomSheet;
    var modal = (
      <div className={cx(classes)} {...props} style={style}>
        <div className="modal-content">
          <h4>{header}</h4>
          <p>{children}</p>
        </div>
        <div className="modal-footer">
          <Button onClick={this.props.onRequestHide} waves='light' modal='close' flat>Close</Button>
        </div>
      </div>
    );
    var backdropStyle = {
      backgroundColor: '#000',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      zIndex: 1040,
      position: 'fixed',
      opacity: 0.5
    };
    return (
      <div>
        <div style={backdropStyle} ref='backdrop' onClick={this.handleBackdropClick} />
        {modal}
      </div>
    );
  }

  handleBackdropClick(e) {
    e.preventDefault();
    this.props.onRequestHide();
  }
}

@@ -85,23 +85,8 @@
 ';%0A%0A
-export default 
 clas
@@ -125,141 +125,127 @@
 %7B%0A  
-static propTypes: %7B%0A    header: React.PropTypes.string,%0A    fixedFooter: React.PropTypes.bool,%0A    bottomSheet: React.PropTypes.bool%0A
+  constructor(props) %7B%0A        super(props);%0A        this.handleBackdropClick = this.handleBackdropClick.bind(this);%0A  
   %7D%0A
@@ -406,26 +406,8 @@
 d',%0A
-      top: '10%25',%0A
     
@@ -439,23 +439,134 @@
 x: 1050%0A
-
     %7D;%0A
+      if (bottomSheet) %7B%0A          style%5B%22bottom%22%5D = 0;%0A      %7D else %7B%0A          style%5B%22top%22%5D = '10%25';%0A      %7D%0A
     var 
@@ -1502,8 +1502,167 @@
 ;%0A  %7D%0A%7D%0A
+%0AModal.propTypes = %7B%0A    header: React.PropTypes.string,%0A    fixedFooter: React.PropTypes.bool,%0A    bottomSheet: React.PropTypes.bool%0A%7D%0A%0Aexport default Modal;%0A

fix modal with bottom sheet style