'use strict';

const React = require('react');
const CounterStore = require('./CounterStore');
const CounterActions = require('./CounterActions');

class MainComponent extends React.Component {

  constructor (props) {
    super(props);

    this.state = CounterStore.getState();
  }

  componentDidMount () {
    CounterStore.on('change', this.updateState.bind(this));
  }

  updateState () {
    this.setState(CounterStore.getState());
  }

  render () {
    return(
      <div className="main">
        <p>
          <input
            type="text"
            ref="input" />
          <input type="button" onClick={() => this.onSubmit()} value="apply" />
        </p>
        <p>{this.state.text}</p>
      </div>
    );
  }

  onSubmit () {
    CounterActions.submitClicked(this.refs.input.value);
  }

}

module.exports = Main;