import React from 'react';
import { connect } from 'react-redux';
import generateEntityId from 'utils/entities';
import { isPopout } from 'utils/popouts';
import { numberShorthand } from 'utils/formatters';
import classnames from 'classnames';

import SecurityContentOverview from './SecurityContentOverview';
import SecurityContentNews from './SecurityContentNews';
import SecurityHeader from './SecurityHeader';
import SecurityContentChart from './SecurityContentChart';
import SecurityContentCalendar from './SecurityContentCalendar';
import SecurityContentFinancials from './SecurityContentFinancials';
import SecurityChart from './SecurityChart';
import SecurityEvents from './SecurityEvents';
import SecuritySearch from './SecuritySearch';

import PercentMeter from 'components/ui/PercentMeter';
import Tabs from 'components/ui/Tabs';
import Tab from 'components/ui/Tab';
import SymbolAutocomplete from '../../search/SymbolAutocomplete';
import Feed from '../feed/Feed';

import { loadSecurity } from 'actions/securities';

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

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

  componentDidMount() {
    const { symbol } = this.props;
    this.changeSymbol(symbol);
  }

  setTitle() {
    const { symbol, quote } = this.props;
    let title = symbol;
    if ('bzExchange' in quote) {
      title = quote.bzExchange + ': ' + title;
    }
    if ('name' in quote) {
      title += ' - ' + quote.name;
    }
    document.title = title;
  }

  changeSymbol(symbol) {
    const { dispatch, id } = this.props;
    dispatch(loadSecurity(id, symbol));
  }

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

  render() {
    if (isPopout()) {
      this.setTitle();
    }

    const menuData = {display: this.props.display};
    const securityDescClasses = classnames('SecurityDesc-text', {'is-expanded': this.state.descExpanded});

    const { quote, symbol, financials, watchlists, calendar, id, logo, dispatch, ownership, averages } = this.props;
    const { descExpanded } = this.state;

    let companyName;
    if (financials) {
      if ('companyProfile' in financials) {
        companyName = financials.companyProfile.standardName;
      }
    }

    const contentDefaults = { dispatch, id, symbol };


    return (
      <div className="Widget-content SecurityWidget">
        <SecuritySearch {...contentDefaults} />
        <SecurityHeader symbol={symbol}
                        exchange={quote.bzExchange}
                        watchlists={watchlists}
                        name={companyName}
                        price={quote.lastTradePrice}
                        change={quote.change}
                        changePercent={quote.changePercent} />
        <Tabs>
          <Tab label="Overview">
            <SecurityContentOverview {...contentDefaults}
                                     calendar={calendar}
                                     quote={quote}
                                     financials={financials}
                                     ownership={ownership}
                                     averages={averages}
                                     logo={logo} />
          </Tab>
          <Tab label="News">
            <SecurityContentNews {...contentDefaults} />
          </Tab>
          <Tab label="Chart">
            <SecurityContentChart {...contentDefaults}
                                  exchange={quote.bzExchange} />
          </Tab>
          <Tab label="Financials">
            <SecurityContentFinancials {...contentDefaults}
                                       quote={quote}
                                       financials={financials} />
          </Tab>
        </Tabs>
      </div>
    );
  }
}

SecurityWidget.propTypes = {
  logo: React.PropTypes.string,
  quote: React.PropTypes.object,
  financials: React.PropTypes.object,
  ownership: React.PropTypes.object,
  averages: React.PropTypes.object,
  calendar: React.PropTypes.object,
  watchlists: 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,
};

function mapStateToProps(state, props) {
  return {
    watchlists: state.watchlists.watchlists
  };
}

export default connect(mapStateToProps)(SecurityWidget);