/* @flow */

import React, { Component } from 'react';
import { Editor } from '../../../src';
import draftToHtml from 'draftjs-to-html';
import Menu from '../Menu';
import styles from './styles.css';

export default class Demo2 extends Component {

  state: any = {
    editorContent: undefined,
  };

  _onEditorChange: Function = (editorContent) => {
    this.setState({
      editorContent,
    });
  };

  render() {
    const { editorContent } = this.state;
    return (
      <div className={styles.demo2_root}>
        <Menu />
        <div className={styles.demo2_label}>
          Playground for multiple react wysiwyg editors. Editable area not distinguishable.
        </div>
        <div>
          This is section above the editor. It has text that is
          not editable.Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Mauris tortor felis,
          volutpat sit amet maximus nec, tempus auctor diam.
          Nunc odio elit, commodo quis dolor in, sagittis
          scelerisque nibh. Suspendisse consequat, sapien sit
          amet pulvinar tristique, augue ante dapibus nulla,
          eget gravida turpis est sit amet nulla. Vestibulum
          lacinia mollis accumsan. Vivamus porta cursus libero
          vitae mattis. In gravida bibendum orci, id faucibus
          felis molestie ac. Etiam vel elit cursus,
          scelerisque dui quis, auctor risus.
        </div>
        <div className={styles.demo2_editorWrapper}>
          <Editor
            toolbarClassName={styles.demo2_toolbar}
            wrapperClassName={styles.demo2_wrapper}
            editorClassName={styles.demo2_editor}
            onChange={this._onEditorChange}
            placeholder={'Start typing I am placeholder this is editable area...'}
          />
        </div>
        <textarea
          className={styles.demo2_content}
          value={draftToHtml(editorContent)}
        >
        </textarea>
      </div>
    );
  }
}
