content: import React from 'react';
  import PropTypes from 'prop-types';
  import { Table, Alert, Button , Col , Label ,
           Row , FormGroup , InputGroup , } from 'react-bootstrap';
  import { Meteor } from 'meteor/meteor';
  import { Bert } from 'meteor/themeteorchef:bert';
  import Loading from '../../components/Loading/Loading';
  import { Capitalize , GetNameFromUserId , GetEmailFromUserId } from '../../../modules/utilities';
  import Icon from '../../components/Icon/Icon';
  import { withTracker } from 'meteor/react-meteor-data';
  import Journal from '../../../api/Journal/Journal';
  import { templateParser, templateFormatter, parseDigit } from 'input-format';
  import { ReactInput } from 'input-format';
  import './JournalDetails.scss';
  
  
  class JournalDetails extends React.Component {
  
      constructor(props){
          super(props);
          this.state = {
              phoneNumber : ""
          }
          this.addPhoneNumber = this.addPhoneNumber.bind( this);
          this.removePhoneNumber = this.removePhoneNumber.bind(this);
          this.addISSN = this.addISSN.bind( this );
          this.handlePhoneNumberChange = this.handlePhoneNumberChange.bind( this );
      }
  
  
      handlePhoneNumberChange( value ){
          this.setState({"phoneNumber" : value });
      }
  
      removePhoneNumber(event , journalId){
          let innerText = event.target.innerText;
          if (innerText == ""){
              let span = event.target.parentNode;
              let but = span.parentNode;
              innerText = but.innerText;
          }
          const phoneNum = innerText.trim();
          Meteor.call('journal.removePhone' , phoneNum , journalId , (error , response)=> {
              if ( response ){
                  Bert.alert('Phone number removed' , 'success');
              }
              else{
                  Bert.alert(`There was an error. ${error}` , 'danger');
              }
          })
      }
  
      addPhoneNumber(event , journalId){
          event.preventDefault();
          const phoneNum = this.state.phoneNumber;
          if ( phoneNum ){
              Meteor.call('journal.addPhoneNumber' , phoneNum , journalId , (error , response )=> {
                  if ( response ){
                      this.setState({"phoneNumber" : ""})
                      Bert.alert('Phone number added' , 'success');
                  }
                  else{
                      Bert.alert(`There was an error. ${error}` , 'danger');
                  }
              })
          }
      }
  
      addISSN(event , journalId){
          event.preventDefault();
          const issn = this.issn.value;
          if ( issn ){
              Meteor.call('journal.addISSN' , issn , journalId , (error , response )=> {
                  if ( response ){
                      Bert.alert('ISSN added' , 'success');
                      this.issn.value = "";
                  }
                  else{
                      Bert.alert(`There was an error. ${error}` , 'danger');
                  }
              })
          }
      }
  
      render(){
          const {journal} = this.props ;
          const TEMPLATE = 'xxx-xxxx-xxxx'
          const parse = templateParser(TEMPLATE, parseDigit);
          const format = templateFormatter(TEMPLATE);
          return (
            <div className="journalDetails tabTop">
              <Row>
                 <Col md={6} mdOffset={3}>
                   <p>Journal Name : { journal.length && journal[0].journalName}</p>
        
                   <p>Editor-in-chief : {journal.length && Capitalize(GetNameFromUserId(journal.length && journal[0].owner))}</p>
        
                   <p>Email : {journal.length && GetEmailFromUserId(journal.length && journal[0].owner)}</p>
  
                   <p>ISSN : { journal.length && journal[0].ISSN ? journal.length && journal[0].ISSN : "Not set"  }</p>
           
                   <div>
                      <br/>
                      <p className="text-center"> Phone Number(s) </p>  
                      
                      {journal.length && journal[0].phone ? 
  
                       (journal.length && journal[0].phone && journal[0].phone.map((number , index)=> {
                             return ( 
                              <p key={index}>
                                <button type="button" 
                                  onClick={(event)=>this.removePhoneNumber(event , journal && journal[0]._id)} 
                                  ref={phoneButton=>(this.phoneButton=phoneButton)} 
                                  className="btn btn-labeled btn-success" >
                                  {number} <span className="btn-label"><i className="glyphicon glyphicon-remove"></i></span>
                                </button>
                              </p>
                             )
                       }))
  
                       :  <Alert bsStyle="info">No phone numbers saved yet !</Alert>}
                       <br/>
                       <hr/>
                   </div>
  
                   <h5>Add Journal ISSN Number</h5>
        
                 <FormGroup>
                    <InputGroup>
                        <input className="form-control"
                         ref={issn => (this.issn = issn)}/>
                        <InputGroup.Button>
                        <Button bsStyle="info" 
                        onClick={(event)=> this.addISSN(event , journal.length && journal[0]._id)}>
                        Add ISSN Number</Button>
                      </InputGroup.Button>
                    </InputGroup>
                 </FormGroup>
        
  
                  <h5>Add Contact Phone Number</h5>
        
                 <FormGroup>
                    <InputGroup>
                       <ReactInput
                          value={ this.state.phoneNumber }
                          ref={ phoneNumber => ( this.phoneNumber = phoneNumber )}
                          onChange={( value )=> this.handlePhoneNumberChange( value )}
                          className="form-control"
                          parse={parse}
                          format={format} 
                          placeholder="000-0000-0000"
                        />  
                        <InputGroup.Button>
                        <Button bsStyle="info" 
                        onClick={(event)=> this.addPhoneNumber(event , journal.length && journal[0]._id)}>
                        Add Phone Number</Button>
                      </InputGroup.Button>
                    </InputGroup>
                 </FormGroup>
        
                 </Col>
              </Row>
        
            </div>
          )
      }
      
        
      }
  
      
      
  
      export default JournalDetails;
  
  
   //export default JournalDetails;
  
  
  