/* eslint-disable max-len, no-return-assign */
  
  import React from 'react';
  import { FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
  import documentEditor from '../../modules/document-editor.js';
  
  export default class DocumentEditor extends React.Component {
    componentDidMount() {
      documentEditor({ component: this });

      setTimeout(() => { document.querySelector('[name="title"]').focus(); }, 0);

    }
  
    render() {
      const { doc } = this.props;
      return (<form
        ref={ form => this.form = form }
        onSubmit={ event => event.preventDefault() }
      >
        <FormGroup>
          <ControlLabel>Title</ControlLabel>
          <FormControl
            type="text"
            name="title"
            defaultValue={ doc && doc.title }
            placeholder="Oh, The Places You'll Go!"
          />
        </FormGroup>
        <FormGroup>
          <ControlLabel>Body</ControlLabel>
          <FormControl
            componentClass="textarea"
            name="body"
            defaultValue={ doc && doc.body }
            placeholder="Congratulations! Today is your day. You're off to Great Places! You're off and away!"
          />
        </FormGroup>
        <Button type="submit" bsStyle="success">
          { doc && doc._id ? 'Save Changes' : 'Add Document' }
        </Button>
      </form>);
    }
  }
  
  DocumentEditor.propTypes = {
    doc: React.PropTypes.object,
  };