var React     = require('react-native');
var Recorder  = require('react-native-modalbox');

var {
  View
} = React;

var Example = React.createClass({

  getInitialState: function() {
    return {
      isOpen: false,
      closingState: false
    }
  },

  open: function() {
    this.setState({isOpen: true});
  },

  close: function() {
    this.setState({isOpen: false});
  },

  onClosed: function() {
    console.log('the modal is closed');
    // If the modal has been closed with a swipe down, we change the state to hide the modal completely 
    if (this.state.isOpen != false)
      this.setState({isOpen: false});
  },

  onOpened: function() {
    console.log('the modal is opened');
  },

  onClosingState: function(state) {
    this.setState({closingState: state});
  },

  render: function() {
    var modalRelease = <View/>;

    if (this.state.closingState)
      modalRelease = <View><Text>Release To leave</Text></View>;

    return (
      <Modal
        style={styles.customModalStyle}
        isOpen={this.state.isOpen}
        swipeToClose={true}
        onClosed={this.onClosed}
        onOpened={this.onOpened}
        onClosingState={this.onClosingState}>
          {modalRelease}
          <Button icon={"cross"} style={styles.modalButton} onPress={this.close}/>
          <Text>I'm the content of the modal!</Text>
      </Modal>
    );
  }

});

AppRegistry.registerComponent('App', () => Example);