import React from 'react';
import classnames from 'classnames';

import BalanceSheet from './financials/BalanceSheet';
import CashFlow from './financials/CashFlow';
import IncomeStatement from './financials/IncomeStatement';

import Tabs from 'components/ui/Tabs';
import Tab from 'components/ui/Tab';

class SecurityContentFinancials extends React.Component {

  renderContainer(financials) {
    if (financials.financials) {
      return (
        <div className="SecurityContentFinancials-data">
          <Tabs>
            <Tab label="Balance Sheet">
              <BalanceSheet financials={financials.financials} />
            </Tab>
            <Tab label="Income Statement">
              <IncomeStatement financials={financials.financials} />
            </Tab>
            <Tab label="Cash Flow">
              <CashFlow financials={financials.financials} />
            </Tab>
          </Tabs>
        </div>
      );
    }
    return (<div />);
  }

  render() {
    const { symbol, quote, financials } = this.props;
    return (
      <div className="SecurityContent SecurityContentFinancials">
        {this.renderContainer(financials)}
      </div>
    );
  }
}

SecurityContentFinancials.propTypes = {
  symbol: React.PropTypes.string,
  quote: React.PropTypes.object,
  financials: React.PropTypes.object,
};

export default SecurityContentFinancials;