import React from 'react';
import { connect } from 'react-redux';
import generateEntityId from 'utils/entities';
import { isPopout } from 'utils/popouts';
import { numberShorthand, numberPercent } from 'utils/formatters';
import classnames from 'classnames';
import forEach from 'lodash/forEach';
import SecurityChart from './SecurityChart';
import SecurityEvents from './SecurityEvents';
import Tabs from 'components/ui/Tabs';
import Tab from 'components/ui/Tab';
import PercentMeter from 'components/ui/PercentMeter';
import Feed from '../feed/Feed';

import {
  changeSecurity,
  loadSecurity
} from 'actions/securities';

import get from 'lodash/get';
import map from 'lodash/map';


class SecurityContentOverview extends React.Component {
  constructor() {
    super();
    this.state = {
      descExpanded: false,
    };
    this.entityId = generateEntityId();
  }

  toggleDescription() {
    this.setState({
      descExpanded: !this.state.descExpanded
    });
  }

  render() {
    const { quote, display, symbol, financials, dispatch, id, averages, ownership } = this.props;
    const { descExpanded, content } = this.state;

    const menuData = { display };
    const isIncreasing = true;
    const securityDescClasses = classnames('SecurityDesc-text', {'is-expanded': descExpanded});

    // this is terribl but... works for now
    let companyName;
    let longDescription;

    // Comparision section fields.
    let marketCap;
    let enterpriseValue;

    let totalLiabilities;
    let totalAssets;
    let cashAndCashEquivalents;
    let netIncome;
    let longTermDebt;
    let revenue;

    let roic;
    let roe;
    let roa;
    let totalDebtEquityRatio;
    let grossMargin;
    let revenueGrowth;
    let ebitdaMargin;
    let evEbitda;
    let currentRatio;
    let bookPerShare;

    let peForward;
    let dividendYield;
    let peTTM;
    let psTTM;

    let dividendPerShare;
    let eps;
    let epsGrowth;

    let beta;

    let shortInterestPercentage = ownership.shortInterest / ownership.sharesOutstanding;
    shortInterestPercentage = parseFloat(shortInterestPercentage).toFixed(3);

    // Industry avgs. terrible api format begets tears..
    let marketCapAverage;
    let marketCapPercentile;
    let evAverage;
    let evPercentile;
    let ltDebtAverage;
    let ltDebtPercentile;
    let revGrowthAverage;
    let revGrowthPercentile;
    let ebitdaMarginAverage;
    let ebitdaMarginPercentile;
    let divYieldAverage;
    let divYieldPercentile;

    let peForwardAverage;
    let peForwardPercentile;
    let peAverage;
    let pePercentile;
    let psAverage;
    let psPercentile;
    let pbAverage;
    let pbPercentile;
    let evEbitdaAverage;
    let evEbitdaPercentile;
    let currentRatioAverage;
    let currentRatioPercentile;

    forEach(averages.percentiles, (statistic) => {
      if (statistic.dataId === 'market_cap') {
        marketCapAverage = numberShorthand(statistic.mean);
        marketCapPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'enterprise_value') {
        evAverage = numberShorthand(statistic.mean);
        evPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'long_term_debt') {
        ltDebtAverage = numberShorthand(statistic.mean);
        ltDebtPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'revenue_growth') {
        revGrowthAverage = statistic.mean;
        revGrowthPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'ebitda_margin') {
        ebitdaMarginAverage = statistic.mean;
        ebitdaMarginPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'forward_dividend_yield') {
        divYieldAverage = statistic.mean;
        divYieldPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'forward_pe_ratio') {
        peForwardAverage = numberShorthand(statistic.mean);
        peForwardPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'pe_ratio') {
        peAverage = numberShorthand(statistic.mean);
        pePercentile = statistic.percentile;
      }

      if (statistic.dataId === 'ps_ratio') {
        psAverage = statistic.mean;
        psPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'tangible_book_value_per_share') {
        pbAverage = statistic.mean;
        pbPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'ev_to_ebitda') {
        evEbitdaAverage = statistic.mean;
        evEbitdaPercentile = statistic.percentile;
      }

      if (statistic.dataId === 'current_ratio') {
        currentRatioAverage = statistic.mean;
        currentRatioPercentile = statistic.percentile;
      }
    });

    if (financials) {
      if ('companyProfile' in financials) {
        companyName = financials.companyProfile.standardName;
        longDescription = financials.companyProfile.longDescription;
      }
      if ('shareClass' in financials) {
        marketCap =       numberShorthand(financials.shareClass.marketCap);
        enterpriseValue = numberShorthand(financials.shareClass.enterpriseValue);
      }

      if ('financials' in financials) {
        if (financials.financials[3]) {
          if ('incomeStatement' in financials.financials[3]) {
            netIncome =              numberShorthand(financials.financials[3].incomeStatement.netIncome);
            revenue =                numberShorthand(financials.financials[3].incomeStatement.totalRevenue);
          }
          if ('balanceSheet' in financials.financials[3]) {
            totalLiabilities =       numberShorthand(financials.financials[3].balanceSheet.totalLiabilities);
            totalAssets =            numberShorthand(financials.financials[3].balanceSheet.totalAssets);
            cashAndCashEquivalents = numberShorthand(financials.financials[3].balanceSheet.cashAndCashEquivalents);
            longTermDebt =           numberShorthand(financials.financials[3].balanceSheet.longTermDebt);
          }
        }
      }

      // Missing! -- ROIC, ROE, RevGrowth in some symbols.
      if ('operationRatios' in financials) {
        if (financials.operationRatios[0]) {
          roic =                 numberPercent(financials.operationRatios[0].roic);
          roe =                  numberPercent(financials.operationRatios[0].roe);
          roa =                  numberPercent(financials.operationRatios[0].roa);
          revenueGrowth =        numberShorthand(financials.operationRatios[0].revenueGrowth);
          totalDebtEquityRatio = numberShorthand(financials.operationRatios[0].totalDebtEquityRatio);
          grossMargin =          numberShorthand(financials.operationRatios[0].grossMargin);
          ebitdaMargin =         numberShorthand(financials.operationRatios[0].ebitdaMargin);
          currentRatio =         numberShorthand(financials.operationRatios[0].currentRatio);
        }
      }

      if ('valuationRatios' in financials) {
        if (financials.valuationRatios[0]) {
          dividendYield =    numberShorthand(financials.valuationRatios[0].forwardDividendYield);
          peForward =        numberShorthand(financials.valuationRatios[0].forwardPeRatio);
          peTTM =            numberShorthand(financials.valuationRatios[0].peRatio);
          psTTM =            numberShorthand(financials.valuationRatios[0].psRatio);
          evEbitda =         numberShorthand(financials.valuationRatios[0].evToEbitda);
          dividendPerShare = numberShorthand(financials.valuationRatios[0].forwardDividend);
          bookPerShare =     numberShorthand(financials.valuationRatios[0].tangibleBookValuePerShare);
        }
      }

      if ('earningRatios' in financials) {
        if (financials.earningRatios[0]) {
          epsGrowth = numberShorthand(financials.earningRatios[0].dilutedEpsGrowth);
        }
      }

      if ('earningReports' in financials) {
        if (financials.earningReports[0]) {
          eps = numberShorthand(financials.earningReports[0].basicEps);
        }
      }

      if ('alphaBeta' in financials) {
        if (financials.alphaBeta[0]) {
          if ('beta' in financials.alphaBeta[0]) {
            beta = numberShorthand(financials.alphaBeta[0].beta);
          }
        }
      }
    }

    return (
      <div className="SecurityContent SecurityContentOverview">
        <section className="SecurityContentOverview-main">
          <SecurityChart symbol={symbol} />
          <section className="SecurityFeed">
            <Tabs>
              <Tab label="All">
                <Feed filters={{keywords: [], symbols: [symbol], channels: [], contentType: []}} />
              </Tab>
              <Tab label="SEC Filings">
                <Feed filters={{keywords: [], symbols: [symbol], channels: [], contentType: ['pr_secfilings']}} />
              </Tab>
              <Tab label="Press Releases">
                <Feed filters={{keywords: [], symbols: [symbol], channels: [], contentType: ['pr_story']}} />
              </Tab>
              <Tab label="BZ Wire">
                <Feed filters={{keywords: [], symbols: [symbol], channels: [], contentType: ['story']}} />
              </Tab>
              <Tab label="Partner News">
                <Feed filters={{keywords: [], symbols: [symbol], channels: [], contentType: ['syndicated_links']}} />
              </Tab>
            </Tabs>
          </section>
        </section>
        <section className="SecurityContentOverview-keyStats">
          <article className="KeyStat KeyStat--simple">
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Prev. Close</div>
                <div className="KeyStat-value">{numberShorthand(quote.previousClosePrice) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Open</div>
                <div className="KeyStat-value">{numberShorthand(quote.open) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Volume</div>
                <div className="KeyStat-value">{numberShorthand(quote.volume) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">50d MA</div>
                <div className="KeyStat-value">{numberShorthand(quote.fiftyDayAveragePrice) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Sector</div>
                <div className="KeyStat-value">{quote.sector}</div>
              </div>
            </div>
          </article>
          <article className="KeyStat KeyStat--simple">
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Ask</div>
                <div className="KeyStat-value">{numberShorthand(quote.askPrice) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Bid</div>
                <div className="KeyStat-value">{numberShorthand(quote.bidPrice) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Day Range</div>
                <div className="KeyStat-value">{quote.low + ' - ' + quote.high}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">52wk Range</div>
                <div className="KeyStat-value">{quote.fiftyTwoWeekLow + ' - ' + quote.fiftyTwoWeekHigh}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Industry</div>
                <div className="KeyStat-value">{quote.industry}</div>
              </div>
            </div>
          </article>
          <article className="KeyStat KeyStat--comparison">
            <h1 className="KeyStat-category">company &amp; industry</h1>
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat"></div>
                <div className="KeyStat-stat">{symbol}</div>
                <div className="KeyStat-stat">Industry Avg.</div>
                <div className="KeyStat-stat">Industry %</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Market Cap.</div>
                <div className="KeyStat-value">{marketCap || '- -'}</div>
                <div className="KeyStat-value">{marketCapAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={marketCapPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Enterprise Value</div>
                <div className="KeyStat-value">{enterpriseValue || '- -'}</div>
                <div className="KeyStat-value">{evAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={evPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">LT Debt</div>
                <div className="KeyStat-value">{longTermDebt || '- -'}</div>
                <div className="KeyStat-value">{ltDebtAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={ltDebtPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Rev. Growth (QoQ)</div>
                <div className="KeyStat-value">{revenueGrowth || '- -'}</div>
                <div className="KeyStat-value">{revGrowthAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={revGrowthPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">EBITDA Margin</div>
                <div className="KeyStat-value">{ebitdaMargin || '- -'}</div>
                <div className="KeyStat-value">{ebitdaMarginAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={ebitdaMarginPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Div. Yield</div>
                <div className="KeyStat-value">{numberPercent(dividendYield) || '- -'}</div>
                <div className="KeyStat-value">{numberPercent(divYieldAverage) || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={divYieldPercentile || 0} />
                </div>
              </div>
            </div>
          </article>
          <article className="KeyStat KeyStat--comparison">
            <h1 className="KeyStat-category">key ratios</h1>
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat"></div>
                <div className="KeyStat-stat">{symbol}</div>
                <div className="KeyStat-stat">Industry Avg.</div>
                <div className="KeyStat-stat">Industry %</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">P/E (Forward)</div>
                <div className="KeyStat-value">{peForward || '- -'}</div>
                <div className="KeyStat-value">{peForwardAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={peForwardPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">P/E (TTM)</div>
                <div className="KeyStat-value">{peTTM || '- -'}</div>
                <div className="KeyStat-value">{peAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={pePercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">P/S (TTM)</div>
                <div className="KeyStat-value">{psTTM || '- -'}</div>
                <div className="KeyStat-value">{psAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={psPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Tangible Book Per Share</div>
                <div className="KeyStat-value">{bookPerShare || '- -'}</div>
                <div className="KeyStat-value">{pbAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={pbPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">EV/EBITDA (TTM)</div>
                <div className="KeyStat-value">{evEbitda || '- -'}</div>
                <div className="KeyStat-value">{evEbitdaAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={evEbitdaPercentile || 0} />
                </div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Current Ratio (3M)</div>
                <div className="KeyStat-value">{currentRatio || '- -'}</div>
                <div className="KeyStat-value">{currentRatioAverage || '- -'}</div>
                <div className="KeyStat-value">
                  <PercentMeter percent={currentRatioPercentile || 0} />
                </div>
              </div>
            </div>
          </article>
          <article className="KeyStat KeyStat--simple">
            <h1 className="KeyStat-category">earnings</h1>
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Revenue</div>
                <div className="KeyStat-value">{revenue || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Revenue Growth (3M)</div>
                <div className="KeyStat-value">{revenueGrowth || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Gross Margin</div>
                  <div className="KeyStat-value">{grossMargin || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Net Income</div>
                <div className="KeyStat-value">{netIncome || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">EPS</div>
                <div className="KeyStat-value">{eps || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">EPS Growth (YoY)</div>
                <div className="KeyStat-value">{epsGrowth || '- -'}</div>
              </div>
            </div>
          </article>
          <article className="KeyStat KeyStat--simple">
            <h1 className="KeyStat-category">balance sheet</h1>
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Cash</div>
                <div className="KeyStat-value">{cashAndCashEquivalents || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Total Assets</div>
                <div className="KeyStat-value">{totalAssets || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">LT Debt</div>
                <div className="KeyStat-value">{longTermDebt || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Total Liabilities</div>
                <div className="KeyStat-value">{totalLiabilities || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Debt/Equity</div>
                <div className="KeyStat-value">{totalDebtEquityRatio || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Current Ratio</div>
                <div className="KeyStat-value">{currentRatio || '- -'}</div>
              </div>
            </div>
          </article>
          <article className="KeyStat KeyStat--simple">
            <h1 className="KeyStat-category">shareholders</h1>
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Div. Yield</div>
                <div className="KeyStat-value">{numberPercent(dividendYield) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Annual Dividend</div>
                <div className="KeyStat-value">{dividendPerShare || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">ROA</div>
                <div className="KeyStat-value">{roa || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">ROE</div>
                <div className="KeyStat-value">{roe || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">ROIC</div>
                <div className="KeyStat-value">{roic || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Beta</div>
                <div className="KeyStat-value">{beta || '- -'}</div>
              </div>
            </div>
          </article>
          <article className="KeyStat KeyStat--simple">
            <h1 className="KeyStat-category">ownership</h1>
            <div className="KeyStat-table">
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Short Interest</div>
                <div className="KeyStat-value">{numberPercent(shortInterestPercentage) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Days-to-Cover</div>
                <div className="KeyStat-value">{ownership.daysToCoverShort || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Short Interest Change</div>
                <div className="KeyStat-value">{ownership.shortInterestsPercentageChange || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Inst. Ownership</div>
                <div className="KeyStat-value">{numberPercent(ownership.institutionPercentHeld) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Insider Ownership</div>
                <div className="KeyStat-value">{numberPercent(ownership.insiderPercentOwned) || '- -'}</div>
              </div>
              <div className="KeyStat-row">
                <div className="KeyStat-stat">Shares Outstanding</div>
                <div className="KeyStat-value">{numberShorthand(ownership.sharesOutstanding) || '- -'}</div>
              </div>
            </div>
          </article>
          <section className="SecurityDesc">
            <p className={securityDescClasses}>
              <span className="SecurityDesc-logo">
                <img src={this.props.logo} alt={companyName + ' logo'} />
              </span>
              {longDescription}
            </p>
            <span className="SecurityDesc-expand" onClick={() => this.toggleDescription()}>
              read {this.state.descExpanded ? 'Less' : 'More'}...
            </span>
          </section>
        </section>
      </div>
    );
  }
}

SecurityContentOverview.propTypes = {
  logo: React.PropTypes.string,
  quote: React.PropTypes.object,
  financials: React.PropTypes.object,
  averages: React.PropTypes.object,
  ownership: React.PropTypes.object,
  symbol: React.PropTypes.string,
  display: React.PropTypes.object,
  id: React.PropTypes.number,
  showMenu: React.PropTypes.bool,
  toggleMenu: React.PropTypes.func,
  dispatch: React.PropTypes.func,
};

export default SecurityContentOverview;