import React from 'react';
import { connect } from 'react-redux';

import { addPopout } from 'actions/popouts';
import { isPopout } from 'utils/popouts';

import FeedWidget from './feed/FeedWidget';
import CalendarWidget from './calendar/CalendarWidget';
import SecurityWidget from './security/SecurityWidget';
import WatchlistWidget from './watchlist/WatchlistWidget';
import { removeWidget } from 'actions/workspaces';
import classnames from 'classnames';
import isEqual from 'lodash/isEqual';

const widgetMap = {
  'newsfeed': FeedWidget,
  'calendar': CalendarWidget,
  'security': SecurityWidget,
  'watchlist': WatchlistWidget
};

class WidgetContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showMenu: false
    };
    this.backgroundPageClick = this.backgroundPageClick.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !(isEqual(nextState, this.state)
             && nextProps.data === this.props.data
             && this.props.id === nextProps.id
             && this.props.theme === nextProps.theme
             && this.props.type === nextProps.type);
  }

  backgroundPageClick(e) {
    let target = e.target;
    while (target.parentNode) {
      if (target.className && ((target.className.indexOf('WidgetWindowBar__btn') !== -1)
          || (target.className.indexOf('FlyoutMenu') !== -1))) {
        return;
      }
      target = target.parentNode;
    }
    if (this.state.showMenu) {
      this.toggleMenu();
    }
  }

  toggleMenu() {
    this.setState({
      showMenu: !this.state.showMenu
    });
  }

  render() {
    const { theme, type, data, dispatch, id } = this.props;
    const WidgetClass = widgetMap[type];
    const themeClass = 'Widget--' + theme;
    const windowTitle = (this.props.type === 'security' || this.props.type === 'watchlist') ? 'Quotes Delayed' : '';
    return (
      <div className={classnames('Widget', themeClass, {'.is-expanded': this.state.expanded})}>
        <div className="WidgetWindowBar">
          <h4 className="WidgetWindowBar-label">{ windowTitle }</h4>
          {!isPopout() ?
          <button className="WidgetWindowBar-btn" onClick={() => removeWidget(id)}>
            <i className="bzpro-icon-close"></i>
          </button>
          : null }
          {!isPopout() ?
          <button className="WidgetWindowBar-btn" onClick={() => dispatch(addPopout(type, data))}>
            <i className="bzpro-icon-popout"></i>
          </button>
          : null }
          {type !== 'security' ?
          <button className="WidgetWindowBar-btn" onClick={() => this.toggleMenu()}>
            <i className="bzpro-icon-options"></i>
          </button>
          : null }
        </div>
        <WidgetClass id={this.props.id} showMenu={this.state.showMenu}
          toggleMenu={() => this.toggleMenu()} {...this.props.data.toJS()} />
      </div>
    );
  }
}

function selectSettings(state) {
  return {
    theme: state.settings.get('theme')
  };
}


WidgetContainer.propTypes = {
  id: React.PropTypes.number,
  data: React.PropTypes.object,
  type: React.PropTypes.string,
  dispatch: React.PropTypes.func,
  theme: React.PropTypes.string
};

export default connect(selectSettings)(WidgetContainer);