var React = require('react');
var reactCreateClass = require('create-react-class');

var SitesList = reactCreateClass({
  getDefaultProps: function () {
    return {
      placeholder: 'http://google.com',
    };
  },

  _handleChange: function (event) {
    var sites = event.target.value;

    this.props.handleChange(sites);
  },

  render: function () {
    return (
      <div className="form-group">
        <label htmlFor="sites" className="col-lg-2 control-label">
          {this.props.label}
        </label>

        <div className="col-lg-10">
          <textarea
            className="form-control"
            rows="3"
            ref="sites"
            onChange={this._handleChange}
            placeholder={this.props.placeholder}
            value={this.props.sites}
          ></textarea>
          <span className="help-block">
            {this.props.helpText}
            <br />
            One line per site.
          </span>
        </div>
      </div>
    );
  },
});

module.exports = SitesList;
