content: import React from 'react';
  import PropTypes from 'prop-types';
  import { Link } from 'react-router-dom';
  import { Row , Col , Button , Modal ,
    Well , Form , Image , InputGroup , Jumbotron ,
    FormControl,FormGroup, ControlLabel , Alert , Table  } from 'react-bootstrap';
  import { createContainer } from 'meteor/react-meteor-data';
  import { Meteor } from 'meteor/meteor';
  import { Bert } from 'meteor/themeteorchef:bert';
  import Loading from '../../components/Loading/Loading';
  import Transactions from '../../../api/Transactions/Transactions';
  import { ReactiveVar } from 'meteor/reactive-var';
  import { GetNameFromUserId , Capitalize , displayMonth , 
    remitaStatusMessage , sumMeUp , getCommision , paymentType }
    from '../../../modules/utilities';
  import moment from 'moment';
  import ReactHTMLTableToExcel from 'react-html-table-to-excel';
  import {Bar} from 'react-chartjs-2';
  import { format , formatNumber , formatMoney } from 'accounting-js';
  
  
  
  
  
  class TransactionReport extends React.Component {
     constructor(props){
       super(props);
       this.state = {
            clicked : [],
       }
       this.handlePaymentType = this.handlePaymentType.bind( this );
       this.handlePaymentYear = this.handlePaymentYear.bind( this );
     }
  
     handlePaymentType( event ){
        const value = event.target.value;
        //build the object to pass to the method
        //get the value of the dropdown of the year dropdown box
        const yearValue = document.getElementById('drpYear').value;
        const filter = {};
        if ( yearValue !== '0') {
            filter.paymentFor = value;
            filter.year = yearValue; 
        }
        else{
          filter.paymentFor= value;
        }
  
        Meteor.call('transactions.groupTransaction' , filter , (error , response ) => {
          if (response){
              result.set( response )
          }
          else{
            Bert.alert(error.reason , 'danger');
          }
        })
     }
  
     handlePaymentYear( event ){
      const year = event.target.value;
  
      if ( year === '0'){
        return false;
      }
     
      //build the object to pass to the method
      const paymentValue = document.getElementById('drpPayment').value;
      const filter = {};
  
      if (paymentValue !== '0'){
          filter.year = year;
          filter.paymentFor= paymentValue;
      }
      else{
        filter.year = year;  
      }
    
      Meteor.call('transactions.groupTransaction' , filter , (error , response ) => {
        if (response){
            result.set( response )
        }
        else{
          Bert.alert(error.reason , 'danger');
        }
      })
   }
  
  
  
  
     render(){
       const { loading , transactions , transYear , data } = this.props;
       return ( !loading ? (
  
         <div>
            <Row>
              <Col sm={4} smOffset={2} >
                <select className="form-control" id="drpPayment" onChange={this.handlePaymentType}>
                      <option value="0">Select Transaction</option>
                      <option value="All">All Transaction</option>
                      <option value="01">Paper Review Payment</option>
                      <option value="02">Paper Publication Payment</option>
                </select>
              </Col>
  
              <Col sm={ 4 }>
                <select className="form-control" id="drpYear" onChange={this.handlePaymentYear}>
                    <option value="0">Select Year</option>
                 {transYear.map((year , index ) =>{
                   return ( 
                     <option value={ year } key={ index }> { year }</option>
                     )
                 })}    
              </select>
  
              </Col>
  
            </Row>
            
                {transactions.length ? (
                <Row>
                 <Col xs={12} lg={5} md={ 5 } sm={ 5 }>
                  <Table className="transTable" responsive striped>
                      <thead>
                         <tr>
                            <th>Month</th>
                            <th>Year</th>
                            <th>Amount</th>
                         </tr>
                      </thead>
  
                      <tbody>
                       {transactions.map(({ _id, Total } , index ) => {
  
                           return (
                              <tr key={index}>
                                 <td>{ displayMonth( _id && _id.Month) }</td>
                                 <td>{ _id.Year }</td>
                                 <td>(&#8358;) &nbsp;{ formatNumber(Total) }</td>
                              </tr>
                            )
                          })}
  
                      </tbody>
  
                  </Table>
                </Col>
                <Col xs={12} lg={7} md={ 7 } sm={ 7 }>
                    <Bar
                      data={data}
                      width={100}
                      height={50}
                      options={{
                        maintainAspectRatio: true
                      }}
                    />
               
                </Col>
                </Row>
                ) :
  
                <div>
                  <Row>
                     <Col md={ 8 } mdOffset={ 2 } sm={ 8 } smOffset={ 2 }>
                        <br/>
                        <br/>
                        <Jumbotron>
                          <p>Select Transactions Made By Type And Year Of Transaction</p>
                        </Jumbotron>
                     </Col>
                  </Row>
                </div>
                }
  
  
               
       </div>
  
       ) : <Loading />);
     }
  }
  
  
  TransactionReport.propTypes = {
    loading: PropTypes.bool.isRequired,
    transactions : PropTypes.arrayOf(PropTypes.object).isRequired,
  };
  
  
  let result = new ReactiveVar([]);
  
  
  
  
  export default createContainer(() => {
    const subscription = Meteor.subscribe('transaction.getAllTransactionsYear');
    let fullYear = [];
    let labelData = [];
    let dataArray = [];
    result.get().map(({_id , Total} , index ) => {
          const month = displayMonth( _id.Month )
          labelData.push( month );
          dataArray.push( Total )
    });
  
    let data = {
      labels: labelData,
      datasets: [
        {
          label: 'Transactions Graph',
          backgroundColor: 'rgba(255,99,132,0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1,
          hoverBackgroundColor: 'rgba(255,99,132,0.4)',
          hoverBorderColor: 'rgba(255,99,132,1)',
          data: dataArray
        }
      ]
    };
  
    if ( subscription.ready() ) {
       const transactions = Transactions.find({}).fetch();
       //let's fucking loop through the transactions extracting the date
       transactions.map(({ date } , index) => {
         const transDate = new Date( date );
         const year = transDate.getFullYear();
         const yearIndex = fullYear.indexOf( year );
         if ( yearIndex == -1){
            //year not saved in the fullYear array already.
            fullYear.push( year );
         }
       })
    }
  
    return {
      loading: !subscription.ready(),
      transYear : fullYear,
      transactions : result.get(),
      data : data
    };
  
  }, TransactionReport);
  