import React from 'react';
import Immutable from 'immutable';
import { connect } from 'react-redux';
import { routeActions } from 'redux-simple-router';
import { feedService, quoteService, channelService } from 'services';

import { addPopout } from 'actions/popouts';

import FeedWidget from '../widgets/feed/FeedWidget';
import WidgetContainer from '../widgets/WidgetContainer';

class Popout extends React.Component {

  componentDidMount() {
    channelService.connect();
    feedService.connect();
    quoteService.connect();

    const { location, popouts, dispatch } = this.props;

    if (popouts.size === 0) {
      const { t, i, d } = location.query;
      // React auto decodes URI in query via reactjs/history/QuerySupport
      const decodedData = JSON.parse(d);
      dispatch(addPopout(t, Immutable.fromJS(decodedData)));
    }
  }

  loadPopout() {
    const { popouts, watchlists } = this.props;
    if (popouts.size > 0 && !watchlists.get('isLoading')) {
      // Pulling first for now since one will only ever exist
      // This will change when we implement saving popouts
      // Need to get each popout by id if saving workspace/popouts
      const popout = popouts.get(0);
      return (<WidgetContainer type={popout.type} data={Immutable.fromJS(popout.data)} />);
    }

    // NEED WIDGET LOADER
    return (<div className="popout__loader">LOADING...</div>);
  }

  render() {
    return (
      <div className="popout">
        {this.loadPopout()}
      </div>
    );
  }
}

Popout.propTypes = {
  popouts: React.PropTypes.object,
  watchlists: React.PropTypes.object,
  location: React.PropTypes.object,
  dispatch: React.PropTypes.func
};

function selectPopouts(state) {
  return {
    popouts: state.popouts,
    watchlists: state.watchlists
  };
}

export default connect(selectPopouts)(Popout);