import React from 'react';
import { connect } from 'react-redux';
import reactMixin from 'react-mixin';
import { getWidgetById } from 'utils/workspaces';
import WidgetMenu from '../WidgetMenu';
import WatchlistCreate from './WatchlistCreate';
import WatchlistImport from './WatchlistImport';
import WatchlistDelete from './WatchlistDelete';
import WatchlistTable from './WatchlistTable';
import WatchlistDropdown from './WatchlistDropdown';
import SymbolAutocomplete from '../../search/SymbolAutocomplete';
import classnames from 'classnames';
import store from '../../../store';
import { isPopout } from 'utils/popouts';
import { selectWatchlist, removeTickerFromWatchlist, addTickerToWatchlist } from 'actions/watchlists';

class WatchlistWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tickers: {},
      showCreateModal: false,
      showImportModal: false,
      showDeleteModal: false
    };
  }

  componentDidMount() {
    const { watchlist, watchlists, id } = this.props;
    // Select default watchlist
    if (watchlist === null && watchlists.size) {
      selectWatchlist(id, watchlists.first().get('id'), isPopout());
    }
  }

  setTitle() {
    const { watchlist } = this.props;
    document.title = 'Watchlist: ' + watchlist.get('name');
  }

  removeSymbolFromWatchlist(symbol) {
    const { watchlist, watchlistId } = this.props;
    return (event) => {
      const ticker = watchlist.get('tickers').find(t => t.get('symbol') === symbol);
      if (ticker) {
        removeTickerFromWatchlist(watchlistId, ticker.get('id'));
      }
    };
  }

  addSymbolToWatchlist(symbol) {
    const { watchlist, watchlistId } = this.props;
    if (!watchlist.get('tickers').find(t => t.get('symbol') === symbol)) {
      addTickerToWatchlist(watchlistId, symbol);
    }
  }

  toggleMgmt(type, menu = false) {
    const { toggleMenu } = this.props;
    const { showCreateModal, showDeleteModal } = this.state;
    if (menu) {
      this.props.toggleMenu();
    }
    if (type === 'add') {
      this.setState({showCreateModal: !showCreateModal});
    } else if (type === 'remove') {
      this.setState({showDeleteModal: !this.state.showDeleteModal});
    } else if (type === 'import') {
      this.setState({showImportModal: !this.state.showImportModal});
    }
  }

  renderWatchlist() {
    if (!this.props.watchlist) {
      return (
        <div className="watchlist-empty">
          No watchlist selected
        </div>
      );
    }
    return (
      <div className="watchlist">
        <WatchlistTable symbols={this.props.watchlist.get('tickers').map(t => t.get('symbol'))} display={this.props.display} removeSymbol={(symbol) => this.removeSymbolFromWatchlist(symbol)} />
      </div>
    );
  }
  render() {
    if (isPopout() && this.props.watchlist) {
      this.setTitle();
    }
    const menuData = {display: this.props.display, toggleMgmt: this.toggleMgmt.bind(this), watchlists: this.props.watchlists};
    return (
      <div className="Widget-content Widget-content--watchlist">
        <WidgetMenu widgetType="watchlist" widgetId={this.props.id} showMenu={this.props.showMenu} toggleMenu={this.props.toggleMenu} menuData={menuData} />
        <div className={classnames('Search WidgetSearch', {'Search--hidden': this.props.watchlist === null})}>
          <SymbolAutocomplete
            onSelect={(symbol) => this.addSymbolToWatchlist(symbol.value)}
            placeholder="Search by symbol or security name..."
          />
          <button className="WidgetSearch-btn WidgetSearch-btn--icon WidgetSearch-btn--blueHover" onClick={() => this.toggleMgmt('import')}>
            <i className="bzpro-icon-edit" />
          </button>
          <button className="WidgetSearch-btn WidgetSearch-btn--icon WidgetSearch-btn--blueHover" onClick={() => this.toggleMgmt('add')}>
            <i className="bzpro-icon-add" />
          </button>
          <button className="WidgetSearch-btn WidgetSearch-btn--icon WidgetSearch-btn--redHover" onClick={() => this.toggleMgmt('remove')}>
            <i className="bzpro-icon-trash" />
          </button>
          <WatchlistDropdown
            widgetId={this.props.id}
            watchlists={this.props.watchlists}
            watchlist={this.props.watchlist}
            showModal={() => this.toggleMgmt('add')}
          />
        </div>

        {this.renderWatchlist()}

        <WatchlistCreate widgetId={this.props.id} show={this.state.showCreateModal} toggle={() => this.toggleMgmt('add')} />
        <WatchlistImport
          watchlistId={this.props.watchlistId}
          watchlistName={this.props.watchlist ? this.props.watchlist.get('name') : ''}
          widgetId={this.props.id}
          show={this.state.showImportModal}
          toggle={() => this.toggleMgmt('import')}
        />
        <WatchlistDelete widgetId={this.props.id} show={this.state.showDeleteModal} toggle={() => this.toggleMgmt('remove')}  watchlistId={this.props.watchlistId} watchlistName={this.props.watchlist ? this.props.watchlist.get('name') : null}/>
      </div>
    );
  }
}

WatchlistWidget.propTypes = {
  id: React.PropTypes.number,
  watchlist: React.PropTypes.object,
  watchlists: React.PropTypes.object,
  watchlistId: React.PropTypes.string,
  display: React.PropTypes.object,
  showMenu: React.PropTypes.bool,
  toggleMenu: React.PropTypes.func
};

function selectedWatchlist(state, props) {
  const watchlist = (props.watchlistId !== null) ? state.watchlists.watchlists.find(v => v.get('id') === String(props.watchlistId)) : null;
  return {
    watchlist: watchlist,
    watchlists: state.watchlists.watchlists
  };
}

export default connect(selectedWatchlist)(WatchlistWidget);