const React = require("react");
const ReactDOM = require("react-dom");
const request = require("request");

const serverAddress = "http://localhost:8000";

class CodeArea extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: "", lastOutput: null};
    this.handleChange = this.handleChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  submit(event) {
    console.log("Event", this.state.value);
    const source = this.state.value;

    const options = {
      url: `${serverAddress}/input`,
      json: true,
      body: { source }
    };
    request.post(options, (error, response, body) => {
      this.setState({lastOutput: body.text})
    });
  }

  renderOutput() {
    if (!this.state.lastOutput) {
      return null;
    }
    return <textarea readOnly value={ this.state.lastOutput } />;
  }

  render() {
    return (<div className="CodeArea">
      <div className="input">
        <textarea value={ this.state.value } onChange={this.handleChange}>
        </textarea>
        <button onClick={ this.submit }>Run!</button>
      </div>
      <div className="output">
        { this.renderOutput() }
      </div>
    </div>);
  }
}

const main = (<div>
  <h1>Schala web input</h1>
  <p>Write your source code here</p>
  <CodeArea/>
</div>);

const rootDom = document.getElementById("main");
ReactDOM.render(main, rootDom);