/*
 * # PNFinalistsApp.js
 * This is the main element that wraps everything else.
 */

/*
 * ## Styles
 * Imported and bundled via webpack.
 */
import '../../css/pn-finalists.css';

/*
 * ## Dependencies
 */
import React, {Component} from 'react';
import Immutable from 'immutable';
import {Container} from 'flux/utils';
import {dispatch} from '../dispatcher';
import AppStore from '../stores/AppStore';
import FinalistsStore from '../stores/FinalistsStore';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import FinalistBox from '../components/FinalistBox';
import FinalistPopover from '../components/FinalistPopover';

class PNFinalists extends Component {

  static getStores() {
    return [
      AppStore,
      FinalistsStore
    ];
  }

  static calculateState(prevState) {
    return {
      finalists: FinalistsStore.getState(),
      app: AppStore.getState(),
    };
  }

  render() {
    return (
      <div className="pn-finalists">
        <FinalistBox finalists={this.state.finalists} clickHandler={togglePopoverVisibility} />
        <ReactCSSTransitionGroup
          transitionName="pn-finalists__popover-"
          transitionAppear={true}
          transitionAppearTimeout={200}
          transitionEnterTimeout={200}
          transitionLeaveTimeout={200}
        >
          {this.state.app.get('showPopover') &&
          <FinalistPopover
            key="popover"
            app={this.state.app}
            clickHandler={togglePopoverVisibility}
          />}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

const PNFinalistsContainer = Container.create(PNFinalists);
export default PNFinalistsContainer;

function togglePopoverVisibility(finalistID = false) {
  dispatch({
    type: 'popover/toggle-visibility',
    finalistID: finalistID,
  });
}

@@ -525,16 +525,59 @@
 group';%0A
+import Portal from '../components/Portal';%0A
 import F
@@ -621,16 +621,16 @@
 stBox';%0A
-
 import F
@@ -1104,16 +1104,92 @@
 ity%7D /%3E%0A
+        %3CPortal portalId=%22pn-finalists-popover%22 className=%22pn-finalists%22%3E%0A  
         
@@ -1213,16 +1213,18 @@
 onGroup%0A
+  
         
@@ -1267,32 +1267,34 @@
 ver-%22%0A          
+ 
+ 
 transitionAppear
@@ -1301,16 +1301,18 @@
 =%7Btrue%7D%0A
+  
         
@@ -1345,32 +1345,34 @@
 %7B200%7D%0A          
+ 
+ 
 transitionEnterT
@@ -1376,32 +1376,34 @@
 erTimeout=%7B200%7D%0A
+  
           transi
@@ -1433,18 +1433,22 @@
         
-%3E%0A
+  %3E%0A  
         
@@ -1489,32 +1489,34 @@
 ') &&%0A          
+  
 %3CFinalistPopover
@@ -1516,16 +1516,18 @@
 Popover%0A
+  
         
@@ -1556,16 +1556,18 @@
         
+  
 app=%7Bthi
@@ -1579,16 +1579,18 @@
 te.app%7D%0A
+  
         
@@ -1646,12 +1646,16 @@
     
+  
 /%3E%7D%0A
+  
     
@@ -1685,16 +1685,34 @@
 nGroup%3E%0A
+        %3C/Portal%3E%0A
       %3C/

put the popover inside a portal