import React from 'react';
import { numberInMillions } from '../../../../utils/formatters';


class CashFlow extends React.Component {

  renderDates(financials) {
    return financials.map((statements, i) => {
      const date = 'As of ' + statements.asOf;
      return <th key={i}>{date}</th>;
    });
  }

  renderField(financials, field) {
    return financials.map((statements, i) => {
      return <td key={i}>{numberInMillions(statements.cashFlowStatement[field]) || '-'}</td>;
    });
  }

  render() {
    const { financials } = this.props;
    return (
      <table className="FinancialTable">
        <thead>
          <tr>
            <th>In Millions (Except per share Items)</th>
            {this.renderDates(financials)}
          </tr>
        </thead>
        <tbody>
          <tr className="FinancialTable-section">
            <td>Net Income</td>
            {this.renderField(financials, 'netIncome')}
          </tr>
          <tr className="FinancialTable-section">
            <td>Operating Activities</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>Depreciation & Amortization</td>
            {this.renderField(financials, 'depreciationAndAmortization')}
          </tr>
          <tr>
            <td>Changes in Accounts Receivables</td>
            {this.renderField(financials, 'changesInAccountReceivables')}
          </tr>
          <tr>
            <td>Changes in Accounts Payable</td>
            {this.renderField(financials, 'changeInAccountPayable')}
          </tr>
          <tr>
            <td>Changes in Inventory</td>
            {this.renderField(financials, 'changeInInventory')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Total Cash Flow From Operating Activities</td>
            {this.renderField(financials, 'operatingCashFlow')}
          </tr>
          <tr className="FinancialTable-section">
            <td>Investing Activities</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>Capital Expenditures</td>
            {this.renderField(financials, 'capitalExpenditure')}
          </tr>
          <tr>
            <td>Investments</td>
            {this.renderField(financials, 'netInvestmentPurchaseAndSale')}
          </tr>
          <tr>
            <td>Other Cash Flows From Investing Activities</td>
            {this.renderField(financials, 'netOtherInvestingChanges')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Total Cash Flow From Investing Activities</td>
            {this.renderField(financials, 'investingCashFlow')}
          </tr>
          <tr className="FinancialTable-section">
            <td>Financing Activities</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>Cash Dividends Paid</td>
            {this.renderField(financials, 'cashDividendsPaid')}
          </tr>
          <tr>
            <td>Net Proceeds From Sale of Common Stock</td>
            {this.renderField(financials, 'netCommonStockIssuance')}
          </tr>
          <tr>
            <td>Other Cash Flows From Financing Activities</td>
            {this.renderField(financials, 'netOtherFinancingCharges')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Total Cash Flow From Financing Activities</td>
            {this.renderField(financials, 'financingCashFlow')}
          </tr>
          <tr className="FinancialTable-section">
            <td>Net Change In Cash</td>
            {this.renderField(financials, 'changesInCash')}
          </tr>
      </tbody>
    </table>
    );
  }
}

CashFlow.propTypes = {
  financials: React.PropTypes.array,
};

export default CashFlow;