import React from 'react';
import classnames from 'classnames';
import reactMixin from 'react-mixin';
import OnClickOutside from 'react-onclickoutside';
import { selectWatchlist } from 'actions/watchlists';
import { isPopout } from 'utils/popouts';

export class WatchlistDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    };

    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  buttonClick() {
    this.setState({active: !this.state.active});
  }

  watchlistClick(watchlistId) {
    selectWatchlist(this.props.widgetId, watchlistId, isPopout());
    this.setState({active: !this.state.active});
  }

  createClick() {
    this.props.showModal('add');
    this.setState({active: !this.state.active});
  }

  handleClickOutside(e) {
    if (this.state.active) {
      this.setState({active: false});
    }
  }

  render() {
    return (
      <div className={classnames('DropdownMenu', {'is-open': this.state.active})} ref="dropdown">
        <div className="DropdownMenu-button" onClick={() => this.buttonClick()}>
          {(this.props.watchlist) ? this.props.watchlist.get('name') : 'Select Watchlist...'}
        </div>
        <ul className="DropdownMenu-list">
          {this.props.watchlists.valueSeq().map(v => <li key={v.get('id')} onClick={() => this.watchlistClick(v.get('id'))}>{v.get('name')}</li>)}
          <li key="create" onClick={() => this.createClick()}>
            <i className="bzpro-icon-add" /> Create Watchlist
          </li>
        </ul>
      </div>
    );
  }
}

WatchlistDropdown.propTypes = {
  widgetId: React.PropTypes.number,
  watchlists: React.PropTypes.object,
  watchlist: React.PropTypes.object,
  showModal: React.PropTypes.func,
};

reactMixin.onClass(WatchlistDropdown, OnClickOutside);
export default WatchlistDropdown;