content: import React from 'react';
  import ReactDOM from 'react-dom';
  import { Meteor } from 'meteor/meteor';
  
  import { Row, Col, Glyphicon, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
  
  import SidebarDocumentsList from '../containers/SidebarDocumentsList.js';
  import ParsedRead from '../components/ParsedRead.js';
  
  import getCurrentReadData from '../../modules/get-current-read-data.js';
  
  
  const UpdateReader = () => (
    <div className="ViewDocument">
      { renderDocument(doc) }
    </div>
  );
  
  export default class Login extends React.Component {
    componentDidMount() {
  
      $('.side-menu').on('click', function(){
        if ($('.wrapper').hasClass('is-open')) {
          $('.side-menu').removeClass('is-active');
          $('.wrapper').removeClass('is-open');
        } else {
          $('.side-menu').addClass('is-active');
          $('.wrapper').addClass('is-open');
        }
      });
  
      $('.reading-body').on('click', function(){
        if ($('.wrapper').hasClass('is-open')) {
          $('.side-menu').removeClass('is-active');
          $('.wrapper').removeClass('is-open');
        }
        else if ($('.wrapper').hasClass('is-open-settings')) {
          $('.settings-menu').removeClass('is-active');
          $('.wrapper').removeClass('is-open-settings');
        }
      });
  
      $('.settings-menu').on('click', function(){
        if ($('.wrapper').hasClass('is-open-settings')) {
          $('.settings-menu').removeClass('is-active');
          $('.wrapper').removeClass('is-open-settings');
        } else {
          $('.settings-menu').addClass('is-active');
          $('.wrapper').addClass('is-open-settings');
        }
      });
    }
  
    handleSubmit(event) {
      event.preventDefault();
      const owner = Meteor.userId();
      let components = ReactDOM.findDOMNode(this.refs.component).value;
      console.log(components)
      Meteor.users.update( { _id: owner }, { $set: { 'profile.components': components }} );
      let num_components = ReactDOM.findDOMNode(this.refs.number_components).value;
      console.log(num_components)
      Meteor.users.update( { _id: owner }, { $set: { 'profile.number_of_components': num_components }} );
      const parsedRead = document.getElementById("parsed-read");
      let parsedReadComponent = window.FindReact(parsedRead)
      parsedReadComponent.setState({component: components});
      parsedReadComponent.setState({num_components: num_components});
    }
  
    render(){
      return (
          <div className="reader">
            <Row>
              <Col xs={ 12 }>
                <div className="wrapper">
                          <div className="side-nav-container">
                            <nav className="side-nav">
                              <ul>
                                <SidebarDocumentsList />
                              </ul>
                            </nav>
                          </div>
                          <div className="main-container">
                            <div className="side-menu">
                              <div className="side-menu-hamburger"></div>
                            </div>
                            <div className="reading-body">
                              <Row>
                                <Col xsOffset={1} xs={ 10 }>
                                    <ParsedRead/>
                                </Col>
                              </Row>
                            </div>
                            <div className="settings-menu">
                              <Glyphicon glyph="cog" />
                            </div>
  
                          </div>
                          <div className="settings-container">
                            <form onSubmit={ this.handleSubmit.bind(this) }>
                                <FormGroup>
                                  <ControlLabel>Component</ControlLabel>
                                  <FormControl ref="component" componentClass="select" placeholder="select">
                                    <option value="word">word</option>
                                    <option value="sentence">sentence</option>
                                  </FormControl>
                                </FormGroup>
                                <FormGroup>
                                  <ControlLabel>Number Per Page</ControlLabel>
                                  <FormControl ref="number_components" componentClass="select" placeholder="select">
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                  </FormControl>
                                </FormGroup>
  
                                <Button type="submit">
                                  Submit
                                </Button>
                              </form>
                          </div>
                        </div>
              </Col>
            </Row>
          </div>
      )
  
    }
  
  }
  