import React from 'react';
import SidebarSnapshots from './sidebar/SidebarSnapshots';
import SidebarMenu from './sidebar/SidebarMenu';
import SymbolAutocomplete from './search/SymbolAutocomplete';
import { connect } from 'react-redux';
import { routeActions } from 'redux-simple-router';
import { CAN_ACCESS_SQUAWK } from 'utils/session';
import { addWidget } from 'actions/workspaces';
import { logout } from 'actions/session';
import {
  addPopoutNewsfeed,
  addPopoutSecurity,
  addPopoutWatchlist,
  addPopoutCalendar
} from 'actions/popouts';
import {
  addWidgetNewsfeed,
  addWidgetSecurity,
  addWidgetWatchlist,
  addWidgetCalendar
} from 'actions/widgets';

import {
  updateUserTheme
} from 'actions/settings';


class SidebarNav extends React.Component {
  addWidget(widget, data = null) {
    const { dispatch } = this.props;
    if (this.props.workspaces.getIn([this.props.activeWorkspaceIndex, 'widgets']).size < 4) {
      switch (widget) {
      case 'newsfeed':
        return dispatch(addWidgetNewsfeed(data));
      case 'security':
        return dispatch(addWidgetSecurity(data));
      case 'calendar':
        return dispatch(addWidgetCalendar(data));
      case 'watchlist':
        return dispatch(addWidgetWatchlist(data));
      default:
        return addWidget(widget);
      }
    }
  }

  popoutSquawk() {
    const { session } = this.props;
    const canHasSquawk = session.hasPerm(CAN_ACCESS_SQUAWK);

    if (session.isLoggedIn && canHasSquawk) {
      window.open('/squawk.html', '', 'width=400, height=300');
      bzTrack.track('Squawk: Open via sidebar');
    }
  }

  toggleTheme() {
    const { theme, dispatch } = this.props;
    const newTheme = theme === 'dark' ? 'light' : 'dark';

    return dispatch(updateUserTheme(newTheme));
  }

  logout() {
    const { dispatch } = this.props;
    dispatch(logout());
    dispatch(routeActions.push('/login/'));
  }

  render() {
    const { dispatch } = this.props;
    return (
      <section className="Sidebar">
        <div className="Sidebar-container">
          <ul className="Sidebar-tools">
            <li>
              <img className="Sidebar-logo" src={require('../assets/images/bzpro-logo-icon.svg')} alt="Profit with faster news and research" />
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => this.addWidget('newsfeed')}>
                <i className="bzpro-icon-newsfeed"></i>
                <label>NEWSFEED</label>
              </button>
              <aside className="FlyoutMenu">
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Launch Newsfeed Widget</h3>
                  <div className="Sidebar-launch">
                    <button onClick={() => dispatch(addPopoutNewsfeed())}>New Window</button>
                    <button onClick={() => this.addWidget('newsfeed')}>In Workspace</button>
                  </div>
                </section>
              </aside>
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => this.addWidget('security')}>
                <i className="bzpro-icon-security"></i>
                <label>SECURITY</label>
              </button>
              <aside className="FlyoutMenu">
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Find A Company</h3>
                  <div className="Search Search-container">
                    <SymbolAutocomplete placeholder="Search by symbol or security name" onSelect={(symbol) => this.addWidget('security', symbol.value)} />
                  </div>
                </section>
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Launch Security Widget</h3>
                  <div className="Sidebar-launch">
                    <button onClick={() => dispatch(addPopoutSecurity())}>New Window</button>
                    <button onClick={() => this.addWidget('security')}>In Workspace</button>
                  </div>
                </section>
              </aside>
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => this.addWidget('calendar')}>
                <i className="bzpro-icon-calendar"></i>
                <label>CALENDAR</label>
              </button>
              <aside className="FlyoutMenu">
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Launch Calendar Widget</h3>
                  <div className="Sidebar-launch">
                    <button onClick={() => dispatch(addPopoutCalendar())}>New Window</button>
                    <button onClick={() => this.addWidget('calendar')}>In Workspace</button>
                  </div>
                </section>
              </aside>
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => this.addWidget('watchlist')}>
                <i className="bzpro-icon-watchlist"></i>
                <label>WATCHLIST</label>
              </button>
              <aside className="FlyoutMenu">
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Launch Watchlist Widget</h3>
                  <div className="Sidebar-launch">
                    <button onClick={() => dispatch(addPopoutWatchlist())}>New Window</button>
                    <button onClick={() => this.addWidget('watchlist')}>In Workspace</button>
                  </div>
                </section>
              </aside>
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => this.popoutSquawk()}>
                <i className="bzpro-icon-squawk"></i>
                <label>SQUAWK</label>
              </button>
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => dispatch(routeActions.replace('/dashboard/preferences/alerts/'))}>
                <i className="bzpro-icon-alert"></i>
                <label>ALERTS</label>
              </button>
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => this.logout()}>
                <i className="bzpro-icon-logout"></i>
                <label>LOG OUT</label>
              </button>
            </li>
            <li>
              <button className="Sidebar-btn" onClick={() => this.toggleTheme()}>
                <i className="bzpro-icon-theme"></i>
                <label>THEME</label>
              </button>
            </li>
            <li>
              <button className="Sidebar-btn">
                <i className="bzpro-icon-help"></i>
                <label>HELP</label>
              </button>
              <aside className="FlyoutMenu">
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Getting Started</h3>
                  <p>
                    Click on the newsfeed icon <i className="bzpro-icon-newsfeed"></i> to
                    launch the Benzinga Pro Newsfeed Widget: a curated feed of
                    news, market-moving exclusives, press releases, and SEC filings.
                  </p>
                </section>
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Support</h3>
                  <p>
                    If you need assistance or technical support with Benzinga Pro
                    you can reach us at (877) 440-9464 or chat with our support team
                    by clicking the button below.
                  </p>
                  <button className="Button Button--blue"
                          onClick={() =>/* eslint-disable new-cap */Intercom('showNewMessage')/* eslint-enable new-cap */}>chat with support</button>
                </section>
                <section className="FlyoutMenu-section">
                  <h3 className="FlyoutMenu-title">Feedback</h3>
                  <p>
                    Have some feedback or suggestions for new features and tools
                    that you'd like to see on Benzinga Pro? We'd love to hear
                    what you're thinking!
                  </p>
                  <p>
                    Fill us in at <a href="mailto:product@benzinga.com">product@benzinga.com</a>
                  </p>
                </section>
              </aside>
            </li>
          </ul>
          <SidebarSnapshots symbols={['SPY', 'QQQ', 'DIA', 'USO', 'GLD', 'TLT']} />
      </div>
      </section>
    );
  }
}

function selectWorkspace(state) {
  return {
    workspaces: state.workspaces.get('workspaceList'),
    activeWorkspace: state.workspaces.getIn(['workspaceList', state.workspaces.get('activeWorkspace')]),
    activeWorkspaceIndex: state.workspaces.get('activeWorkspace'),
    session: state.session,
    theme: state.settings.get('theme')
  };
}

SidebarNav.propTypes = {
  workspaces: React.PropTypes.object,
  activeWorkspace: React.PropTypes.object,
  activeWorkspaceIndex: React.PropTypes.number,
  dispatch: React.PropTypes.func,
  session: React.PropTypes.object,
  theme: React.PropTypes.string
};

export default connect(selectWorkspace)(SidebarNav);


// <h4 className="FlyoutMenu-subtitle">security <i className="bzpro-icon-security"></i></h4>
// <p>
//   A curated feed of news, market-moving exclusives,
//   press releases, and SEC filings.
// </p>
// <h4 className="FlyoutMenu-subtitle">calendar <i className="bzpro-icon-calendar"></i></h4>
// <p>
//   A curated feed of news, market-moving exclusives,
//   press releases, and SEC filings.
// </p>
// <h4 className="FlyoutMenu-subtitle">watchlist <i className="bzpro-icon-watchlist"></i></h4>
// <p>
//   A curated feed of news, market-moving exclusives,
//   press releases, and SEC filings.
// </p>