import React from 'react';
import ReactDOM from 'react-dom';
import Countable from 'countable';


class Statics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            paragraphs: 0,
            sentences: 0,
            words: 0,
            characters: 0,
            all: 0
        };
        this.Counter_Callback = this.Counter_Callback.bind(this);
    }
    Counter_Callback(counter) {
        this.setState({
            paragraphs: counter.paragraph,
            sentences: counter.sentences,
            words: counter.words,
            characters: counter.characters,
            all: counter.all
        });
    }
    render() {
        var area = document.getElementById('editor');
        Countable.live(area, this.Counter_Callback);
        return (
            <div>
                <div id="Word_Counter">
                    {this.state.words} Words
                </div>
            </div>
        );
    }
}

ReactDOM.render(<Statics/>, document.getElementById('footer-statics'));