content: import React from 'react';
  import PropTypes from 'prop-types';
  import { Row, Col, FormGroup, ControlLabel, Button , Well } from 'react-bootstrap';
  import { Meteor } from 'meteor/meteor';
  import { withTracker } from 'meteor/react-meteor-data';
  import MultipleStepTitle from './PaperTitle';
  import MultipleStepAuthors from './Authors';
  import MultipleStepAbstract from './Abstract';
  import MultipleStepReviewEntry from './ReviewEnteredEntry';
  import { Capitalize , GetNameDetailsObjectFromId } from '../../../modules/utilities';
  import { ReplaceSpace, StripHtml } from '../../../modules/utilities2'; 
  import Loading from '../../components/Loading/Loading';
  import { ReactiveVar } from 'meteor/reactive-var';
  import Journals from '../../../api/Journal/Journal';
  
  import './styles.scss';
  
  class MultiPagePaperForm extends React.Component {
      constructor(props){
          super(props)
          this.state = {
              appState : 1 ,
              data : {
                  type : {paperTitle : "",
                          paperType : "0" , 
                          paperTitlePreview : ""},
                  authors : [ ],
                  abstract : "" ,
                  preview : "",
                  entryComplete : false ,
          
              },
              wordLength : 0,
  
          }
          this.nextButton = this.nextButton.bind( this );
          this.navigateSteps = this.navigateSteps.bind( this );
          this.updateState = this.updateState.bind(this);
          this.previousButton = this.previousButton.bind(this);
          this.checkIfAllFieldsFilled = this.checkIfAllFieldsFilled.bind(this);
      }
  
      updateState(key , value ){
          let selection = this.state.data;
          selection[key] = value
          this.setState({data : selection} );
          this.checkIfAllFieldsFilled();
      }
  
      checkIfAllFieldsFilled(){
          //loop through the state data and determine if the 
          //fields are complete.
          let dataToLoop = this.state.data;
          if ( dataToLoop.type.paperTitle !== "" 
               && dataToLoop.type.paperType !== "0" && dataToLoop.authors.length > 0 )
               {
               
               const selection = this.state.data;
               selection.entryComplete = true;
               this.setState({data : selection});
          }
      }
  
  
      nextButton (event , key , value ){
         //when navigating also store the data on the state object  
         event.preventDefault()
         let num = this.state.appState;
         let data = this.state.data;
         data[key] = value ;
         num +=  1 ;
         this.setState({"appState" : num , 
                         data  });
         this.checkIfAllFieldsFilled();
         
      }
  
      previousButton (event , key , value ){
          //when navigating also store the data on the state object 
          event.preventDefault()
          let num = this.state.appState;
          let data = this.state.data;
          data[key] = value ;
          num -=  1 ;
          this.setState({"appState" : num , 
                          data  })
          this.checkIfAllFieldsFilled();
          
       }
  
      navigateSteps ( event , num ) {
          event.preventDefault();
          const numToSet = num 
          const data = this.state.data
          this.setState({appState : numToSet , data });
          this.checkIfAllFieldsFilled();
      }
  
     
  
      render(){
          const {history , journalId , editionId , editionName , date } = this.props;
          return (
              <div>
                <Row>
                  <Col md={12}>
                  <div className="process">
                      <div className="process-row">
                          <div className="process-step">
                              <button type="button" onClick={(event)=> this.navigateSteps(event , 1)}
                              className={`btn btn-default btn-circle 
                              ${this.state.appState === 1 ? 'active' : ''}`}><i className="fa fa-book fa-3x"></i></button>
                              <p>Paper Title</p>
                          </div>
                          <div className="process-step">
                              <button type="button" onClick={(event)=> this.navigateSteps(event , 2)}
                              className={`btn btn-default btn-circle 
                              ${this.state.appState === 2 ? 'active' : ''}`}><i className="fa fa-users fa-3x"></i></button>
                              <p>Author(s) Details</p>
                          </div> 
                          <div className="process-step">
                              <button type="button" onClick={(event)=> this.navigateSteps(event , 3)}
                              className={`btn btn-default btn-circle 
                              ${this.state.appState === 3 ? 'active' : ''}`}>
                              <i className="fa fa-th fa-3x"></i>
                              </button>
                              <p>Abstract</p>
                          </div> 
                          <div className="process-step">
                              <button type="button" onClick={(event)=> this.navigateSteps(event , 4)} 
                              className={`btn btn-default btn-circle 
                              ${this.state.appState === 4 ? 'active' : ''}`} 
                               ><i className="fa fa-thumbs-up fa-3x"></i></button>
                              <p>View Entry</p>
                          </div> 
                    </div>
                  </div>
                </Col>
               </Row>
  
            <Row>
             <div className="formBody">
                { this.state.appState === 1 ? (
                  <Col md={12}>
                   <MultipleStepTitle nextButton={this.nextButton} 
                   previousButton={this.previousButton} 
                   data = {this.state.data } updateState={this.updateState} />
                  </Col>
                ) : ''}
  
                { this.state.appState === 2 ? (
                  <Col md={12}>
                   <MultipleStepAuthors nextButton={this.nextButton} 
                   previousButton={this.previousButton} 
                   data = {this.state.data } updateState={this.updateState} />
                  </Col>
                ) : ''}
  
                { this.state.appState === 3 ? (
                  <Col md={12}>
                   <MultipleStepAbstract nextButton={this.nextButton} 
                   previousButton={this.previousButton} 
                   data = {this.state.data } updateState={this.updateState} />
                  </Col>
                ) : ''}
  
                { this.state.appState === 4 ? (
                  <Col md={12}>
                   <MultipleStepReviewEntry  data={this.state.data } 
                      journalId={journalId} editionId={editionId}
                      editionName={ReplaceSpace(editionName)} date={date}
                      previousButton={this.previousButton} history={history} />
                  </Col>
                ) : ''}
              </div>
              </Row>
          </div>
              
          )
      
      }
  
  }
  
  export default AddPaperArchiveContainer = withTracker(({match})=> {
       const {journalId , editionId , editionName , date } = match.params;
        return {
          journalId ,
          editionId ,
          editionName , 
          date
        }
  }) (MultiPagePaperForm )
  
  
  
  
  