import React, { Component } from 'react';

import PropTypes from 'prop-types';

import SlateEditor from './SlateEditor';

import { now } from '../utils';

import './NoteInput.css';

class NoteInput extends Component {

  state = {

    buttonDisabled: false,

    startedAt: null,

    finishedAt: null,

  }

  onEditorChange = (e) => {

    this.setState({

      buttonDisabled: e.value.document === 0,

      startedAt: e.startedAt,

      finishedAt: e.finishedAt

    });

  }

  onAddNoteClick = () => {

    // const marginComment = this.marginComment.value;

    this.props.addNote(this.props.session, {

      plain: plain,

      raw: raw,

      html: html,

      startedAt: this.state.startedAt,

      finishedAt: now(),

      categories: categories,

      // marginComment: marginComment,

    });

  }

  onCheckboxChange = (e) => {

    this.props.setAutoSubmit(e.target.checked);

  }

  componentDidMount() {

  }

  render() {

    return (

      <form>

        <div className="editor mb-3">

          <div className="editor-left sticky-bottom px-2">

              onChange={this.onEditorChange}

              onEnterKeyDown={this.onAddNoteClick}

              onButtonClick={this.onAddNoteClick}

              onCheckboxChange={this.onCheckboxChange}

              isChecked={this.props.autoSubmit}

              isButtonDisabled={this.state.buttonDisabled}

              annotationCategories={ this.props.annotationCategories } />

          </div>

          {/* <div className="editor-right w-25 pl-2 border-0 sticky-bottom">

            <input type="textarea" className="form-control h-100"

              name="margin"

              placeholder="Espace de commentaire pour votre note"

              // inputRef={ ref => { this.marginComment = ref; } }

              ref={(marginComment) => { this.marginComment = marginComment; }}

            />

          </div> */}

        </div>

      </form>

    );

  }

}

NoteInput.propTypes = {

  addNote: PropTypes.func.isRequired

};

export default NoteInput;