import React, { PureComponent } from "react";
import { connect } from "react-redux";
import queryString from "query-string";
import { fetchAndObserveData } from "../../actions/index";
import DataFetchError from "../../components/report/data-fetch-error";
import LoadingIcon from "../../components/report/loading-icon";
import InteractiveIframe from "../../components/report/interactive-iframe";

import "../../../css/report/report-app.less";
import "../../../css/report/iframe-standalone-app.less";
import config from "../../config";

class IframeStandaloneApp extends PureComponent {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { fetchAndObserveData } = this.props;
    fetchAndObserveData();
  }

  renderIframe() {
    const { report, answers } = this.props;
    const { iframeQuestionId } = queryString.parse(window.location.search);

    const question = report.get("questions").get(iframeQuestionId);

    const studentId = config("studentId");
    const answer = answers.filter(a =>
      a.get("questionId") === iframeQuestionId &&
      a.get("platformUserId") === studentId
    ).first();

    if (!answer) {
      const errorText =
        !iframeQuestionId ? "Parameter 'iframeQuestionId' is missing" :
        !studentId ? "Parameter 'studentId' is missing" :
        `No data for question '${iframeQuestionId}' by student '${studentId}'`;
      return <DataFetchError error={{title: "Unable to fetch data", body: errorText}} />;
    }

    let url;
    let state;
    // There are two supported answer types handled by iframe question: simple link or interactive state.
    if (answer.get("type") === "external_link") {
      // Answer field is just the reportable URL. We don't need any state.
      url = answer.get("answer");
      state = null;
    } else if (answer.get("type") === "interactive_state") {
      // URL field is provided by question. Answer field is a state that will be passed
      // to the iframe using iframe-phone.
      url = question.get("url");
      state = answer.get("answer");
    }
    return (
      <InteractiveIframe src={url} state={state} answer={answer} style={{border: "none"}} width="100%" height="100%" />
    );
  }

  render() {
    const { report, error, isFetching } = this.props;
    return (
      <div className="report-app full-size">
        <div className="report full-size" style={{ opacity: isFetching ? 0.3 : 1 }} data-cy="standaloneIframe">
          {report && this.renderIframe()}
          {error && <DataFetchError error={error} />}
        </div>
        {isFetching && <LoadingIcon />}
      </div>
    );
  }
}

function mapStateToProps(state) {
  const data = state.get("data");
  const error = data.get("error");
  const reportState = state.get("report");
  const answers = reportState && reportState.get("answers");
  const dataDownloaded = !error && !data.get("isFetching");
  return {
    report: dataDownloaded && reportState,
    answers,
    isFetching: data.get("isFetching"),
    error,
  };
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    fetchAndObserveData: () => dispatch(fetchAndObserveData())
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(IframeStandaloneApp);

@@ -387,16 +387,69 @@
 iframe%22;
+%0Aimport Answer from %22../../components/report/answer%22;
 %0A%0Aimport
@@ -1532,16 +1532,440 @@
 %0A    %7D%0A%0A
+    const answerType = answer.get(%22type%22);%0A    if (answerType === %22interactive_state%22 %7C%7C answerType === %22external_link%22) %7B%0A      // This will handle the main use case - rendering of the interactive iframe. Note that Answer component would%0A      // also handle it if we provided alwaysOpen=true, but it wouldn't try to make it full screen, and so on.%0A      // It seems to be easier to render custom InteractiveIframe here.%0A  
     let 
@@ -1969,16 +1969,18 @@
 et url;%0A
+  
     let 
@@ -1986,16 +1986,18 @@
  state;%0A
+  
     // T
@@ -2094,24 +2094,26 @@
  state.%0A    
+  
 if (answer.g
@@ -2106,36 +2106,28 @@
   if (answer
-.get(%22t
+T
 ype
-%22)
  === %22extern
@@ -2130,32 +2130,34 @@
 ternal_link%22) %7B%0A
+  
       // Answer 
@@ -2217,24 +2217,26 @@
 tate.%0A      
+ 
+ 
 url = answer
@@ -2249,32 +2249,34 @@
 answer%22);%0A      
+  
 state = null;%0A  
@@ -2273,16 +2273,18 @@
 = null;%0A
+  
     %7D el
@@ -2296,28 +2296,20 @@
  (answer
-.get(%22t
+T
 ype
-%22)
  === %22in
@@ -2324,24 +2324,26 @@
 e_state%22) %7B%0A
+  
       // URL
@@ -2424,16 +2424,18 @@
 d%0A      
+  
 // to th
@@ -2463,16 +2463,18 @@
 -phone.%0A
+  
       ur
@@ -2500,24 +2500,26 @@
 rl%22);%0A      
+  
 state = answ
@@ -2540,18 +2540,22 @@
 %22);%0A    
-%7D%0A
+  %7D%0A  
     retu
@@ -2555,24 +2555,26 @@
    return (%0A
+  
       %3CInter
@@ -2681,23 +2681,209 @@
 00%25%22 /%3E%0A
+  
     );%0A
+    %7D else %7B%0A      // This will handle all the other answers like open response, multiple choice, or image question.%0A      return %3CAnswer question=%7Bquestion%7D answer=%7Banswer%7D /%3E;%0A    %7D%0A
   %7D%0A%0A  r

Handle all kind of questions in iframe-standalone-app