import React, {Component} from 'react';

import { Form, FormGroup, Button } from 'react-bootstrap';

import { Plain } from 'slate';

import PropTypes from 'prop-types';

import SlateEditor from './SlateEditor';

class NoteInput extends Component {

  state = {

    buttonDisabled: false

  }

  onChange = (state) => {

    const text = Plain.serialize(state);

    this.setState({ buttonDisabled: text.length === 0 });

  }

  onAddNoteClick = () => {

    this.refs.editor.clear();

    setTimeout(() => this.refs.editor.focus(), 250);

  }

  componentDidMount() {

    const text = this.refs.editor.asPlain();

    this.setState({ buttonDisabled: text.length === 0 });

  }

  render() {

    return (

      <Form>

        <FormGroup>

          <div className="editor-wrapper">

            <SlateEditor ref="editor" onChange={this.onChange} />

          </div>

        </FormGroup>

        <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>

      </Form>

    );

  }

}

NoteInput.propTypes = {

  addNote: PropTypes.func.isRequired

};

export default NoteInput;