content: /* eslint-disable */
  import React from 'react';
  import PropTypes from 'prop-types';
  import { Row, Col, FormGroup, ControlLabel, 
           Button , Well , Alert , Table } from 'react-bootstrap';
  import { Meteor } from 'meteor/meteor';
  import { withTracker } from 'meteor/react-meteor-data';
  import MultipleStepJournal from '../MultipleStepJournal/MultipleStepJournal';
  import MultipleStepTitle from '../MultiStepTitle/MultiStepTitle';
  import MultipleStepAuthors from '../MultiStepAuthor/MultiStepAuthor';
  import MultipleStepAbstract from '../MultipleStepAbstract/MultipleStepAbstract';
  import MultipleStepReviewEntry from '../MultipleStepReviewEntry/MultipleStepReviewEntry';
  import { Capitalize , GetNameDetailsObjectFromId , validateEmail , sumMeUp } from '../../../../modules/utilities';
  import Loading from '../../../components/Loading/Loading';
  import { ReactiveVar } from 'meteor/reactive-var';
  import Journals from '../../../../api/Journal/Journal';
  import Papers from '../../../../api/Papers/Papers';
  import validate from '../../../../modules/validate';
  import renderHTML from 'react-render-html';
  import './SubmitPaper.scss';
  
  class SubmitPaper extends React.Component {
      constructor(props){
          super(props)
          this.state = {
              appState : 1 ,
              data : {
                  journalName : "" ,
                  type : {paperTitle : "",
                          paperType : "0" , 
                          paperTitlePreview : ""},
                  authors : [ ],
                  abstract : "" ,
                  preview : "",
                  entryComplete : false ,
                  journalTitle : "" ,
                  userId : "",
                  authorName : "",
          
              },
              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);
          this.selectJournal = this.selectJournal.bind( this );
          this.handleSubmit = this.handleSubmit.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.journalName !== "0" 
               && dataToLoop.type.paperTitle !== "" 
               && dataToLoop.type.paperType !== "0" && dataToLoop.authors.length > 0 
               && dataToLoop.abstract !== "")
               {
               
               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();
      }
  
      selectJournal(value){
          selectedValue.set(value);
      }
  
      
      
        handleSubmit() {
          const email = this.emailAddress.value;
          if ( email == ""){
              Bert.alert('email is required' , 'danger')
          }
          if (!validateEmail( email)){
              Bert.alert('Please enter a valid email address' , 'danger');
              return;
          }
          Meteor.call('user.checkAndReturnUserDetails' , email , ( error , user ) => {
              if (error){
                Bert.alert(error.reason, 'danger');
              }
              else{
                const { name , userId , title , firstname , surname , rank } = user;
                const data = this.state.data;
                const author = {
                  title ,
                  firstname ,
                  surname ,
                  rank ,
                }
                data["userId"] = userId;
                data["authorName"] = name;
                //let authorArray = this.state.data.authors;
                //authorArray.push( author );
               // data["authors"] = authorArray;
                this.setState({ data : data });
              }
          });
        }
  
      render(){
          const {history , journals , loading , selectedJournal , papers } = this.props;
          const { data } = this.state;
          return ( !loading ? ( 
              <div>
                <Row>
                 <Col md={8}>
                   {this.state.data.userId ? (
          
                      <div>
                      <Row>
                        <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-folder-open fa-3x"></i></button>
                                  <p>Journal Name</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-book fa-3x"></i></button>
                                  <p>Paper Title</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-users fa-3x"></i></button>
                                  <p>Author(s) Details</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-th fa-3x"></i>
                                  </button>
                                  <p>Abstract</p>
                              </div> 
                              <div className="process-step">
                                  <button type="button" onClick={(event)=> this.navigateSteps(event , 5)} 
                                  className={`btn btn-default btn-circle 
                                  ${this.state.appState === 5 ? 'active' : ''}`} 
                                  ><i className="fa fa-thumbs-up fa-3x"></i></button>
                                  <p>View Entry</p>
                              </div> 
                          </div>
                      </div>
  
                  <div className="formBody">
                  { this.state.appState === 1 ? (
                      <Col>
                          <MultipleStepJournal nextButton={this.nextButton} 
                          previousButton={this.previousButton} selectChange={this.selectJournal}
                          journals={journals} selectedJournal={selectedJournal}
                          data={this.state.data} updateState={this.updateState} />
                      </Col>
                      ) : ''}
  
                      { this.state.appState === 2 ? (
                      <Col>
                      <MultipleStepTitle nextButton={this.nextButton} 
                      previousButton={this.previousButton} 
                      data = {this.state.data } updateState={this.updateState} />
                      </Col>
                      ) : ''}
  
                      { this.state.appState === 3 ? (
                      <Col>
                      <MultipleStepAuthors nextButton={this.nextButton} 
                      previousButton={this.previousButton} 
                      data = {this.state.data } updateState={this.updateState} />
                      </Col>
                      ) : ''}
  
                      { this.state.appState === 4 ? (
                      <Col>
                      <MultipleStepAbstract nextButton={this.nextButton} 
                      previousButton={this.previousButton} 
                      data = {this.state.data } updateState={this.updateState} />
                      </Col>
                      ) : ''}
  
                      { this.state.appState === 5 ? (
                      <Col>
                      <MultipleStepReviewEntry  data={this.state.data }
                          previousButton={this.previousButton} 
                          history={history} updateState={this.updateState} />
                      </Col>
                      ) : ''}
                  </div>
                      
                  </Row>
            </div>
  
  
          ) :  <div>
                 {/* create a form to enter the person email address*/}
           <Row>
            <Col xs={ 12 } lg={ 12 }
              sm={ 12 }  md={ 12 }>
              <Well bsSize="small">
  
              <h4 className="page-header text-center">Author Email Address</h4>
          
                  <FormGroup>
                    <ControlLabel>Author's Email Address</ControlLabel>
                    <input
                      type="email"
                      className="form-control"
                      name="emailAddress"
                      ref={emailAddress => (this.emailAddress = emailAddress)}
                      placeholder="The Author's email address!"
                    />
                  </FormGroup>
  
  
                  <Button type="submit" 
                    block onClick={(event)=> this.handleSubmit( event )}
                    bsStyle="success" bsSize="large">
                     Get Details</Button>
                
              </Well>
              </Col>
  
  
            </Row>
              
              </div>}
              </Col>
  
              {/*where i am loading where they can make payment */}
              <Col md={4}>
                  { papers.length ? (
                      <div>
                          <p className="text-center">Papers Submitted</p>
                       <Table condensed responsive>
                          <thead>
                          <tr>
                              <th>S/N</th>
                              <th>Paper Title</th>
                              <th>Action</th>
                          </tr>
                          </thead>
                          <tbody>
                          {papers.map(({title , _id , authors , 
                                       journalID , currentPaperStatus , 
                                       paperUploads , publishFeePaid },index)=>{
                                return (<tr key={index} >
                                          <td>{sumMeUp(index , 1)}</td>
                                          <td>{title && renderHTML(title)}</td>
                              
                                          <td>
                                          { currentPaperStatus === "00" ? (
                                         <div>
                                           { paperUploads && paperUploads[0] ? (<p>Paper Uploaded</p>) : 
                                             <p>
                                               <Button bsSize='small' 
                                                 bsStyle='default'
                                                 onClick={()=>history.push(`/app/upload_paper/${_id}/${journalID}`)}
                                              >Upload Paper</Button>
                                             </p>
                                         
                                            }
                                         </div>
                                        
                                       ) : currentPaperStatus === "10" ? (
                                        <p>
                                          <Button bsSize='small' 
                                           bsStyle='info'
                                           onClick={()=>history.push(`/app/dashboard/correct_submitted_papers/${_id}/${journalID}`)}
                                          >Correct Paper</Button>
                                        </p>
                                       ) : currentPaperStatus === "09" ? (
                                        publishFeePaid ? (
                                          <p>
                                           Publication fee paid
                                          </p>
                                        ) : <p>
                                             <Button bsSize='small' 
                                              bsStyle='info'
                                              onClick={()=>history.push(`/app/pay_publication_fee/${_id}/${journalID}`)}
                                            >Pay Publish Fee</Button>
                                           </p>)
                                         : <p>No Action</p> }
                                       
                                            
                                          </td>
                                      
                                       </tr>)
                                  })}
                        </tbody>
                    </Table>
                      </div>
                  ) : <div>
  
                          <Alert>
                              <h5>No papers submitted.</h5>
                          </Alert>
  
                     </div>
                  }
  
              </Col>
  
         </Row>
        </div>  ): <Loading />)
      
      }
  
  }
  
  let selectedValue = new ReactiveVar("")
  
  export default SubmitPaperContainer = withTracker(()=> {
       const subscription = Meteor.subscribe('journals.allActiveJournals');
       const sub2 = Meteor.subscribe('journals.getOneJournal' , selectedValue.get());
       const sub3 = Meteor.subscribe("papers.findProxyPaperUploaded");
        return {
          journals : Journals.find({"active" : true , "approved" : true}).fetch(),
          loading : !subscription.ready() && !sub2.ready() && !sub3.ready(),
          selectedJournal : Journals.find(selectedValue.get()).fetch(),
          papers : Papers.find({"proxyUploaderId" : Meteor.userId()}).fetch(),
        }
  }) ( SubmitPaper );
  
  
  
  
  