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

export class SecurityWatchlistDropdown extends React.Component {
  constructor(props) {
    super(props);

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

  watchlistClick(watchlistId) {
    const { setActive, selectWatchlist } = this.props;
    selectWatchlist(watchlistId);
    setActive(false);
  }

  handleClickOutside(e) {
    this.props.setActive(false);
  }

  render() {
    return (
      <div className={classnames('DropdownMenu', {'is-open': this.props.active})} ref="dropdown">
        <button
          className="DropdownMenu-button Button Button--blue"
          onClick={() => this.props.setActive(true)}
        >
          add to watchlist
        </button>
        <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>)}
        </ul>
      </div>
    );
  }
}

SecurityWatchlistDropdown.propTypes = {
  active: React.PropTypes.bool,
  setActive: React.PropTypes.func,
  watchlists: React.PropTypes.object,
  selectWatchlist: React.PropTypes.func,
};

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