import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class SubjectTextField extends Component {
  static displayName = 'SubjectTextField'

  static containerRequired = false

  static propTypes = {
    value: PropTypes.string,
    onSubjectChange: PropTypes.func,
  }

  onInputChange = ({target: {value}}) => {
    this.props.onSubjectChange(value)
  }

  focus() {
    this._el.focus()
  }

  render() {
    const {value} = this.props

    return (
      <div className="composer-subject subject-field">
        <input
          ref={el => { this._el = el; }}
          type="text"
          name="subject"
          placeholder="Subject"
          value={value}
          onChange={this.onInputChange}
        />
      </div>
    );
  }
}