import React from 'react';
import {NavLink} from 'fluxible-router';
import {connectToStores} from 'fluxible-addons-react';
import ContentQuestionsStore from '../../../../stores/ContentQuestionsStore';
import ContentQuestionsList from './ContentQuestionsList';
// import ContentQuestionForm from './ContentQuestionForm';

class ContentQuestionsPanel extends React.Component {
    render() {
        const questions = this.props.ContentQuestionsStore.questions;
        const question = this.props.ContentQuestionsStore.question;
        const selector = this.props.ContentQuestionsStore.selector;

    // Button bar differs for Slide and Folder
        let buttonBar = '';
        switch(selector.stype){
            case 'slide':
                buttonBar = (
        <button className='ui button blue'>
          <i className='plus icon'>
          </i>
          Add question
        </button>
      );
                break;
            case 'deck':
                buttonBar = (
        <div className='ui buttons'>
          <button className='ui button'>
            Exam mode
          </button>
          <button className='ui button'>
            Test mode
          </button>
          <button className='ui button blue'>
            <i className='file pdf outline icon'>
            </i>
            Export to PDF
          </button>
        </div>
      );
                break;
        }

        let questionsHeader = (
      <div
        className="ui segment attached"
        data-reactid={636}>
        <div
          className="ui bottom attached"
          data-reactid={637}>
          <div data-reactid={638}>
            <div className="ui vertical segment">
              <div className="ui two column stackable grid">
                <div className="column">
                  <h3 className="ui  header">Questions
            <div className="ui label red">Prototype interface - not functional</div></h3>
                </div>
                <div className="column right aligned">
                  <button className="ui right floated compact button primary">
                    <i
                      className="small plus icon"
                      data-reactid={640} />
                    {/* react-text: 641 */}Add question{/* /react-text */}
                  </button>
                </div>
              </div>
            </div>
            {content}
          </div>
        </div>
      </div>

    );

        let content = (
      <div>
        {buttonBar}
        {questionsHeader}
        <ContentQuestionsList items={questions} />
      </div>
    );

    //   if (question !== undefined && question !== null) {
    // //Question is selected -> show its data
    //       content = (
    //   <div>
    //     <ContentQuestionForm question={question} />
    //   </div>
    // );
    //   }

        return (
      <div
        ref="contentQuestionsPanel"
        className="ui bottom attached">
        {content}
      </div>
        );
    }
}

ContentQuestionsPanel = connectToStores(ContentQuestionsPanel, [ContentQuestionsStore], (context, props) => {
    return {
        ContentQuestionsStore: context.getStore(ContentQuestionsStore).getState()
    };
});
export default ContentQuestionsPanel;

@@ -194,16 +194,154 @@
 Store';%0A
+import ContributorsStore from '../../../../stores/ContributorsStore';%0Aimport UserProfileStore from '../../../../stores/UserProfileStore';%0A
 import C
@@ -726,16 +726,141 @@
 elector;
+%0A        const creators = this.props.ContributorsStore.creator;%0A        const user = this.props.UserProfileStore.user.userid;
 %0A%0A    //
@@ -1655,24 +1655,724 @@
 %0A        %7D%0A%0A
+        let addQuestionButton = (%0A          %3Cdiv className=%22column right aligned%22%3E%0A            %3Cbutton className=%22ui right floated compact button primary%22%3E%0A              %3Ci%0A                className=%22small plus icon%22%0A                data-reactid=%7B640%7D /%3E%0A              %7B/* react-text: 641 */%7DAdd question%7B/* /react-text */%7D%0A            %3C/button%3E%0A          %3C/div%3E%0A        );%0A%0A        const getUserButton = () =%3E %7B%0A            console.log('creators: ', creators);%0A            console.log('user: ', user);%0A            if(creators.length %3E 0)%7B%0A                if(creators%5B0%5D.id === user)%7B%0A                    return addQuestionButton;%0A                %7D%0A            %7D%0A            return null;%0A        %7D;%0A%0A
         let 
@@ -2929,368 +2929,25 @@
     
-%3Cdiv className=%22column right aligned%22%3E%0A                  %3Cbutton className=%22ui right floated compact button primary%22%3E%0A                    %3Ci%0A                      className=%22small plus icon%22%0A                      data-reactid=%7B640%7D /%3E%0A                    %7B/* react-text: 641 */%7DAdd question%7B/* /react-text */%7D%0A                  %3C/button%3E%0A                %3C/div%3E
+%7BgetUserButton()%7D
 %0A   
@@ -3693,16 +3693,53 @@
 onsStore
+, ContributorsStore, UserProfileStore
 %5D, (cont
@@ -3849,16 +3849,165 @@
 tState()
+,%0A        ContributorsStore: context.getStore(ContributorsStore).getState(),%0A        UserProfileStore: context.getStore(UserProfileStore).getState(),
 %0A    %7D;%0A

Add basic check; not working due to missing load action