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


class IncomeStatement 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.incomeStatement[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>
            <td>Total Revenue</td>
            {this.renderField(financials, 'totalRevenue')}
          </tr>
          <tr>
            <td>Cost of Revenue</td>
            {this.renderField(financials, 'costOfRevenue')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Gross Profit</td>
            {this.renderField(financials, 'grossProfit')}
          </tr>
          <tr>
            <td>Research & Development Expenses</td>
            {this.renderField(financials, 'researchAndDevelopment')}
          </tr>
          <tr>
            <td>Selling, General, & Admin Expenses</td>
            {this.renderField(financials, 'sellingGeneralAndAdministration')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Total Operating Expenses</td>
            {this.renderField(financials, 'operatingExpense')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Total Operating Income or Loss</td>
            {this.renderField(financials, 'operatingIncome')}
          </tr>
          <tr>
            <td>Income Before Tax</td>
            {this.renderField(financials, 'pretaxIncome')}
          </tr>
          <tr>
            <td>Tax Provision</td>
            {this.renderField(financials, 'taxProvision')}
          </tr>
          <tr>
            <td>Interest Expense</td>
            {this.renderField(financials, 'interestExpense')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Net Income</td>
            {this.renderField(financials, 'netIncome')}
          </tr>
          <tr className="FinancialTable-total">
            <td>Net Income Applicable To Common Shares</td>
            {this.renderField(financials, 'netIncomeCommonStockholders')}
          </tr>
        </tbody>
      </table>
    );
  }
}

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

export default IncomeStatement;