import React from 'react';
import store from '../../../store';

import classnames from 'classnames';
import { toggleDisplay } from 'actions/securities';
import { isPopout } from 'utils/popouts';

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

  toggleDisplay(display) {
    store.dispatch(toggleDisplay(this.props.widgetId, display));
  }

  render() {
    const { display, showMenu } = this.props;

    return (
      <aside className={classnames('FlyoutMenu', 'company-menu', {'FlyoutMenu--active': showMenu})} ref="menu">
        <h3 className="FlyoutMenu-title">Security Widget Settings</h3>
        <section className="FlyoutMenu-section">
          <h4 className="FlyoutMenu-subtitle">Displayed Sections</h4>
          <div className="FlyoutMenu-display">
            <label className="FlyoutMenu-display__label">Chart</label>
            <div className={classnames('FlyoutMenu-display__toggle', {active: display.chart})} onClick={() => this.toggleDisplay('chart')} />
          </div>
          <div className="FlyoutMenu-display">
            <label className="FlyoutMenu-display__label">Security News</label>
            <div className={classnames('FlyoutMenu-display__toggle', {active: display.news})} onClick={() => this.toggleDisplay('news')} />
          </div>
          <div className="FlyoutMenu-display">
            <label className="FlyoutMenu-display__label">Events & Calendar</label>
            <div className={classnames('FlyoutMenu-display__toggle', {active: display.events})} onClick={() => this.toggleDisplay('events')} />
          </div>
          <div className="FlyoutMenu-display">
            <label className="FlyoutMenu-display__label">Key Stats</label>
            <div className={classnames('FlyoutMenu-display__toggle', {active: display.stats})} onClick={() => this.toggleDisplay('stats')} />
          </div>
          <div className="FlyoutMenu-display">
            <label className="FlyoutMenu-display__label">Security Profile</label>
            <div className={classnames('FlyoutMenu-display__toggle', {active: display.profile})} onClick={() => this.toggleDisplay('profile')} />
          </div>
        </section>
      </aside>
    );
  }
}

SecurityMenu.propTypes = {
  showMenu: React.PropTypes.bool,
  widgetId: React.PropTypes.number,
  display: React.PropTypes.object
};

export default SecurityMenu;