import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { formatTimestamp } from '../utils';
import SlateEditor from './SlateEditor';
import './Note.css';

class Note extends Component {

  onClickDelete = (e) => {
    e.preventDefault();
    e.stopPropagation();

    this.props.onDelete();
  }

  onClickButton = (e) => {

    const plain = this.refs.editor.asPlain();
    const raw = this.refs.editor.asRaw();
    const html = this.refs.editor.asHtml();
    const categories = this.refs.editor.asCategories();
    // const marginComment = this.marginComment.value;

    const data = {
      plain,
      raw,
      html,
      categories,
      // marginComment
    }

    this.props.onSave(this.props.note, data);
  }

  onClickClose = (e) => {
    e.preventDefault();
    e.stopPropagation();

    this.props.onClose();
  }

  renderNoteContent() {
    if (this.props.isEditing) {
      return (
        <div className="note-content w-100 pl-2 pt-2">
          <SlateEditor ref="editor"
            onButtonClick={ this.onClickButton }
            note={ this.props.note }
            annotationCategories={ this.props.annotationCategories } />
        </div>
      )
    }

    return (
      <div className="note-content w-100 pl-2 pt-2" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
    )
  }

  // renderNoteMarginComment() {
  //   if (this.props.isEditing) {
  //     return (
  //       <div className="row">
  //       <div className="note-margin-comment w-25 mt-3">
  //         <input type="text" className="form-control"
  //           name="margin"
  //           componentClass="textarea"
  //           placeholder="Espace pour un commentaire de marge"
  //           defaultValue={ this.props.note.marginComment }
  //           // inputRef={ ref => { this.marginComment = ref; } } />
  //           ref={(marginComment) => { this.marginComment = marginComment; }} />
  //       </div>
  //       </div>
  //     )
  //   }

    // return (
    //   <div className="note-margin-comment w-25 mt-5">
    //     <small className="text-muted">{ this.props.note.marginComment }</small>
    //   </div>
    // )
  // }

  renderNoteRight() {
    if (this.props.isEditing) {
      return (
        <a onClick={this.onClickClose}>
          <span className="material-icons pl-2">close</span>
        </a>
      );
    }

    return (
      <a onClick={this.onClickDelete}>
        <span className="material-icons delete-icon pl-2">delete</span>
      </a>
    )
  }

  render() {
    return (
    <div id={"note-" + this.props.note._id} className="note text-sm mr-5 pt-1"
    onClick={ this.props.onClick }>
      <div className="mr-5">
        <small className="start text-warning pt-2">{ formatTimestamp(this.props.note.startedAt) }</small>
        <small className="finish text-warning pb-2">{ formatTimestamp(this.props.note.finishedAt) }</small>
      </div>
        { this.renderNoteContent() }
        {/* { this.renderNoteMarginComment() } */}
        <div className="float-right">
        { this.renderNoteRight() }
        </div>
    </div>
    );
  };
}

Note.propTypes = {
  note: PropTypes.object.isRequired,
};

export default Note;