import { connect } from 'react-redux';
import ModalAlert from '../components/modal-alert';
import { dismissModalDialog, advanceTrial, navigateToNextChallenge } from '../actions';

const messageProps = {
  MatchDrakeFailure: {
    message: "That's not the drake!",
    explanation: "The drake you have created doesn't match the target drake.\nPlease try again.",
    rightButton: {
      label: "Try again",
      clickFunc: "onDismiss"
    }
  },
  MatchDrakeSuccessLastTrial: {
    message: "Good work!",
    explanation: "The drake you have created matches the target drake.",
    rightButton: {
      label: "Next trial",
      clickFunc: "onAdvanceTrial"
    }
  },
  ChallengeCompleted: {
    message: "Good work!",
    explanation: "You have completed all trials in this challenge.",
    rightButton: {
      label: "Next challenge",
      clickFunc: "onNavigateToNextChallenge"
    },
    challengeAwards: {caseId: 0, challengeId:0, challengeCount: 0, progress: -1}
  }
};

function mapStateToProps (state) {
  var props;
  if (state.itsMessage){
    props = {
      message: "Message from ITS",
      explanation: state.itsMessage.text,
      rightButton: {
        label: "OK",
        clickFunc: "onDismiss"
      }
    };
  } else {
    if (state.challengeComplete){
      props = messageProps.ChallengeCompleted;
      props.challengeAwards.caseId = state.case;
      props.challengeAwards.challengeId = state.challenge;
      props.challengeAwards.challengeCount = state.challenges;
      props.challengeAwards.progress = state.challengeProgress;
    } else {
      if (state.trialSuccess) {
        props = messageProps.MatchDrakeSuccessLastTrial;
      } else {
        props = messageProps.MatchDrakeFailure;
      }
    }
  }
  return {
    show: state.showingInfoMessage,
    ...props
  };
}

function mapDispatchToProps (dispatch) {
  return {
    onDismiss: () => dispatch(dismissModalDialog()),
    onAdvanceTrial: () => dispatch(advanceTrial()),
    onNavigateToNextChallenge: () => dispatch(navigateToNextChallenge())
  };
}

function mergeProps(stateProps, dispatchProps) {
  let props = {...stateProps};
  if (stateProps.leftButton) {
    props.onLeftButtonClick = dispatchProps[props.leftButton.clickFunc];
  }
  if (props.rightButton) {
    props.onRightButtonClick = dispatchProps[props.rightButton.clickFunc];
  }
  return props;
}

const ModalMessageContainer = connect(mapStateToProps, mapDispatchToProps, mergeProps)(ModalAlert);

export default ModalMessageContainer;

@@ -95,69 +95,20 @@
 ort 
-%7B dismissModalDialog, advanceTrial, navigateToNextChallenge %7D
+* as actions
  fro
@@ -357,37 +357,43 @@
 ,%0A      
-clickFunc: %22onDismiss
+action: %22dismissModalDialog
 %22%0A    %7D%0A
@@ -585,23 +585,18 @@
     
-clickFunc: %22onA
+action: %22a
 dvan
@@ -795,23 +795,18 @@
     
-clickFunc: %22onN
+action: %22n
 avig
@@ -970,24 +970,81 @@
 props;%0A  if 
+(state.message) %7B%0A    props = state.message;%0A  %7D else if 
 (state.itsMe
@@ -1196,29 +1196,35 @@
     
-clickFunc: %22onDismiss
+action: %22dismissModalDialog
 %22%0A  
@@ -1874,181 +1874,112 @@
     
-onDismiss: () =%3E dispatch(dismissModalDialog()),%0A    onAdvanceTrial: () =%3E dispatch(advanceTrial()),%0A    onNavigateToNextChallenge: () =%3E dispatch(navigateToNextChallenge())
+actionCreator: function (actionName) %7B%0A      return () =%3E%0A        dispatch(actions%5BactionName%5D());%0A    %7D
 %0A  %7D
@@ -2086,24 +2086,51 @@
 s.leftButton
+ && props.leftButton.action
 ) %7B%0A    prop
@@ -2160,25 +2160,39 @@
 ispatchProps
-%5B
+.actionCreator(
 props.leftBu
@@ -2192,34 +2192,31 @@
 .leftButton.
-clickFunc%5D
+action)
 ;%0A  %7D%0A  if (
@@ -2232,16 +2232,44 @@
 htButton
+ && props.rightButton.action
 ) %7B%0A    
@@ -2308,17 +2308,31 @@
 tchProps
-%5B
+.actionCreator(
 props.ri
@@ -2345,18 +2345,15 @@
 ton.
-clickFunc%5D
+action)
 ;%0A  

Update message-container to allow arbitrary button actions