import React from 'react';

class FieldTextArea extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: props.value || '' };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    this.setState({ value: e.target.value });

    this.props.onChange(this.props.name, e.target.value);
  }

  render() {
    return (
      <div className="box-content">
        <div className="columns">
          <div className="column-6">
            <div className="field field-info">
              <h3 className="field-info-title">{this.props.title}</h3>
              <p className="field-info-text">{this.props.desc}</p>
            </div>
          </div>
          <div className="column-6">
            <div className="field">
              <label htmlFor={this.props.name}>{this.props.title}</label>
              <textarea value={this.state.value} name={this.props.name} id={this.props.name} cols="30" rows="10" onChange={this.handleInputChange}/>
            </div>
          </div>
        </div>
      </div>
    )
  }

}

export default FieldTextArea;
