class Terminal extends React.Component {
  componentDidMount() {
    // ignore command
    var {interpreter, command, ...options} = this.props;
    this.terminal = $(this.node).terminal(interpreter, options);
  }
  componentWillUnmount() {
    this.terminal.destroy();
  }
  isCommandControlled() {
    return this.props.command != undefined;
  }
  render() {
    if (this.terminal && this.isCommandControlled()) {
      this.terminal.set_command(this.props.command, true);
    }
    return (
      <div ref={(node) => this.node = node}></div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {command: ''};
  }
  update(command) {
    this.setState({
      command
    });
  }
  exec() {
    // we access internal representation, but we need this in order to have
    // enter in input to trigger enter in terminal
    this.terminal.exec(this.state.command);
    this.update('');
  }
  render() {
    let command = this.state.command;
    return (
      <div>
        <Terminal
          interpreter={(command, term) => {term.echo('you typed ' + command); }}
          outputLimit={0}
          command={command}
          onInit={(term) => {this.terminal = term}}
          onCommandChange={(command) => this.update(command)}
          greetings="ReactJS Terminal"/>
        <input value={command} onChange={(event) => this.update(event.target.value)}
               onKeyDown={(e) => { if (e.which == 13) { this.exec(); }}}/>
        <div>{command}</div>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

github('jcubic/jquery.terminal');