import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import FeedMenu from '../widgets/feed/FeedMenu';
import WatchlistMenu from '../widgets/watchlist/WatchlistMenu';
import SecurityMenu from '../widgets/security/SecurityMenu';
import CalendarMenu from '../widgets/calendar/CalendarMenu';
import reactMixin from 'react-mixin';
import OnClickOutside from 'react-onclickoutside';

class WidgetMenu extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  handleClickOutside(e) {
    if (this.props.showMenu) {
      this.props.toggleMenu();
    }
  }

  renderForFeed() {
    return (
      <FeedMenu widgetId={this.props.widgetId}
                showMenu={this.props.showMenu}
                textSize={this.props.menuData.textSize}
                headerSpacing={this.props.menuData.headerSpacing}
                themes={this.props.menuData.themes} />
    );
  }
  renderForWatchlist() {
    return (
      <WatchlistMenu widgetId={this.props.widgetId}
                     showMenu={this.props.showMenu}
                     toggleMgmt={this.props.menuData.toggleMgmt}
                     watchlists={this.props.menuData.watchlists}
                     display={this.props.menuData.display} />
    );
  }
  renderForSecurity() {
    return (
      <SecurityMenu widgetId={this.props.widgetId}
                     showMenu={this.props.showMenu}
                     display={this.props.menuData.display}
                     toggleDisplay={this.props.menuData.toggleDisplay} />
    );
  }
  renderForCalendar() {
    return (
      <CalendarMenu widgetId={this.props.widgetId}
                     showMenu={this.props.showMenu}
                     calendarType={this.props.menuData.calendarType}
                     displayOptions={this.props.menuData.displayOptions} />
    );
  }
  renderCloseButton() {
    return (
      <button className="FlyoutMenu-close" onClick={this.props.toggleMenu}>
        <i className="bzpro-icon-close"></i>
      </button>
    );
  }

  render() {
    let menuDisplay = <div>No menu defined for this widget type.</div>;
    if (this.props.widgetType === 'newsfeed') {
      menuDisplay = this.renderForFeed();
    } else if (this.props.widgetType === 'company') {
      menuDisplay = this.renderForSecurity();
    } else if (this.props.widgetType === 'watchlist') {
      menuDisplay = this.renderForWatchlist();
    } else if (this.props.widgetType === 'calendar') {
      menuDisplay = this.renderForCalendar();
    }
    return (
      <ReactCSSTransitionGroup
        transitionName="slide-in-and-out"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}
      >
        {this.props.showMenu && this.renderCloseButton()}
        {this.props.showMenu && menuDisplay}
      </ReactCSSTransitionGroup>
    );
  }
}

WidgetMenu.propTypes = {
  widgetType: React.PropTypes.string,
  widgetId: React.PropTypes.number,
  showMenu: React.PropTypes.bool,
  toggleMenu: React.PropTypes.func,
  menuData: React.PropTypes.object
};

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