import React from 'react';
import classnames from 'classnames';
import SecurityWatchlistDropdown from './SecurityWatchlistDropdown';
import { loadSecurity } from 'actions/securities';
import { addTickerToWatchlist } from 'actions/watchlists'; // (watchlistId, ticker) {

class SecurityHeader extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dropdownActive: false,
    };
  }

  addToWatchlist(watchlistId) {
    const { symbol } = this.props;
    addTickerToWatchlist(watchlistId, symbol);
  }

  render() {
    const { symbol, name, watchlists, exchange, price, change, changePercent } = this.props;
    const percentClasses = classnames('SecurityPrice-percent', {'u-downText': change < 0, 'u-upText': change > 0});

    return (
      <section className="SecurityHeader">
        <div className="SecurityHeader-info">
          <div className="SecurityInfo">
            <span className="SecurityInfo-name">{name}</span>
            <span className="SecurityInfo-index">({exchange}: {symbol})</span>
          </div>
          <div className="SecurityPrice">
            <span className="SecurityPrice-price">{price}</span>
            <span className={percentClasses}>{change} ({changePercent}%)</span>
          </div>
        </div>
        <SecurityWatchlistDropdown
          active={this.state.dropdownActive}
          setActive={(active) => this.setState({dropdownActive: active})}
          selectWatchlist={(watchlistId) => this.addToWatchlist(watchlistId)}
          watchlists={watchlists}
        />
      </section>
    );
  }
}


SecurityHeader.propTypes = {
  dispatch: React.PropTypes.func,
  symbol: React.PropTypes.string,
  name: React.PropTypes.string,
  watchlists: React.PropTypes.object,
  exchange: React.PropTypes.string,
  price: React.PropTypes.number,
  change: React.PropTypes.number,
  changePercent: React.PropTypes.number
};

export default SecurityHeader;