import React, {Component} from 'react';

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

import moment from 'moment';

import PropTypes from 'prop-types';

import SlateEditor from './SlateEditor';

class NoteInput extends Component {

  state = {

    buttonDisabled: false,

    time: moment().format('H:mm:ss'),

    startedAt: null,

    finishedAt: null,

  }

  onEditorChange = (e) => {

    this.setState({

      buttonDisabled: e.state.document.length === 0,

      startedAt: e.startedAt,

      finishedAt: e.finishedAt

    });

  }

  onAddNoteClick = () => {

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

    const raw = this.refs.editor.asRaw();

    const html = this.refs.editor.asHtml();

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

      plain: plain,

      raw: raw,

      html: html,

      startedAt: this.state.startedAt,

      finishedAt: moment().format('H:mm:ss')

    });

    this.refs.editor.clear();

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

  }

  componentDidMount() {

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

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

    setInterval(() => {

      const time = moment().format('H:mm:ss');

      this.setState({ time });

    }, 1000);

  }

  renderTiming() {

    if (this.state.startedAt && this.state.finishedAt) {

      return (

        <span>

          <Label>{this.state.startedAt}</Label> ⇒ <Label>{this.state.finishedAt}</Label>

        </span>

      )

    } else {

      return (

        <span>No timing</span>

      )

    }

  }

  render() {

    return (

      <Form>

        <Row>

          <Col md={6}>

            { this.renderTiming() }

          </Col>

          <Col md={6} className="text-right">

            <Label bsStyle="info">{ this.state.time }</Label>

          </Col>

        </Row>

        <hr />

        <FormGroup>

          <div className="editor-wrapper">

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

          </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;