<file_sep>import React, { Component } from 'react';
import './App.css';
import axios from 'axios';

import Output from './components/Output';
import Select from './components/controls/Select';
import Text from './components/controls/Text';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      paragraphs: 4,
      html: true,
      text: ''
    }
  }

  componentWillMount() {
    this.getSampleText();
  }

  getSampleText() {
    axios.get(`http://hipsterjesus.com/api/?paras=${this.state.paragraphs}&html=${this.state.html}`, { headers: {'Access-Control-Allow-Origin': '*'}})
      .then(response => {
        this.setState({ text: response.data.text }, () => console.log(response));
      })
      .catch(error => {
        console.log(error);
      });
  }

  showHtml(value) {
    this.setState({ html: value }, this.getSampleText);
  }

  changeParagraphs(number) {
    this.setState({ paragraphs: number }, this.getSampleText);
  }

  render() {
    return (
      <div className="App container">
        <h1 className="text-center">ReactJS Text Generator</h1>
        <hr />
        <form className="form-inline">
          <div className="form-group">
            <label>Paragraphs:</label>
            <Text value={this.state.paragraphs} onChange={this.changeParagraphs.bind(this)} />
          </div>
          <div className="form-group">
            <label>Include HTML:</label>
            <Select value={this.state.html} onChange={this.showHtml.bind(this)} />
          </div>
        </form>
        <br /><br />
        <Output value={this.state.text} />
      </div>
    );
  }
}

export default App;
