import React from 'react';
import classnames from 'classnames';
import { connect } from 'react-redux';
import { channelService } from '../../../services/';
import { isPopout } from 'utils/popouts';
import { toggleDisplay } from 'actions/watchlists';

export default class WatchlistMenu extends React.Component {
    toggleDisplay(display) {
      toggleDisplay(this.props.widgetId, display, isPopout());

      bzTrack.track('Watchlist Menu: Toggle', {
        column: display
      });
    }
    render() {
      return (
        <aside className={classnames('FlyoutMenu', 'watchlist-menu', {'FlyoutMenu--active': this.props.showMenu})} ref="menu">
          <h3 className="FlyoutMenu-title">Watchlist Widget Settings</h3>
          <section className="FlyoutMenu-section">
            <h4 className="FlyoutMenu-subtitle">Displayed Columns</h4>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Symbol</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.symbol.visible})} onClick={() => this.toggleDisplay('symbol')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Security Name</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.company.visible})} onClick={() => this.toggleDisplay('company')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Price</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.price.visible})} onClick={() => this.toggleDisplay('price')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Bid</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.bidPrice.visible})} onClick={() => this.toggleDisplay('bidPrice')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Ask</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.askPrice.visible})} onClick={() => this.toggleDisplay('askPrice')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Change ($)</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.nominalChange.visible})} onClick={() => this.toggleDisplay('nominalChange')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Change (%)</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.percentChange.visible})} onClick={() => this.toggleDisplay('percentChange')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Volume</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.volume.visible})} onClick={() => this.toggleDisplay('volume')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">52 Week High</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.yearHigh.visible})} onClick={() => this.toggleDisplay('yearHigh')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">52 Week Low</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.yearLow.visible})} onClick={() => this.toggleDisplay('yearLow')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Day High</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.dayHigh.visible})} onClick={() => this.toggleDisplay('dayHigh')} />
            </div>
            <div className="FlyoutMenu-display">
              <label className="FlyoutMenu-display__label">Day Low</label>
              <div className={classnames('FlyoutMenu-display__toggle', {active: this.props.display.dayLow.visible})} onClick={() => this.toggleDisplay('dayLow')} />
            </div>
          </section>
        </aside>
      );
    }
}

WatchlistMenu.propTypes = {
  showMenu: React.PropTypes.bool,
  widgetId: React.PropTypes.number,
  toggleMgmt: React.PropTypes.func,
  watchlists: React.PropTypes.object,
  display: React.PropTypes.object
};