'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Questionnaire = undefined;

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _Button = require('../components/questionnaire/Button');

var _Button2 = _interopRequireDefault(_Button);

var _reactDocumentMeta = require('react-document-meta');

var _reactDocumentMeta2 = _interopRequireDefault(_reactDocumentMeta);

var _Leading = require('../components/Leading');

var _Leading2 = _interopRequireDefault(_Leading);

var _Option = require('../components/questionnaire/Option');

var _Option2 = _interopRequireDefault(_Option);

var _Question = require('../components/questionnaire/Question');

var _Question2 = _interopRequireDefault(_Question);

var _QuestHeader = require('../components/questionnaire/QuestHeader');

var _QuestHeader2 = _interopRequireDefault(_QuestHeader);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Result = require('../components/questionnaire/Result');

var _Result2 = _interopRequireDefault(_Result);

var _reactSlick = require('react-slick');

var _reactSlick2 = _interopRequireDefault(_reactSlick);

var _WorkingProcessBar = require('../components/questionnaire/WorkingProcessBar');

var _WorkingProcessBar2 = _interopRequireDefault(_WorkingProcessBar);

var _reactRedux = require('react-redux');

var _questionnaire = require('../actions/questionnaire.js');

var _index = require('../constants/index');

var _header = require('../actions/header');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

if (process.env.BROWSER) {}

var Questionnaire = function (_Component) {
  _inherits(Questionnaire, _Component);

  _createClass(Questionnaire, null, [{
    key: 'fetchData',
    value: function fetchData(_ref) {
      var params = _ref.params;
      var store = _ref.store;

      return store.dispatch((0, _questionnaire.fetchQuestionnaire)(_lodash2.default.get(params, ['questionnaireId'], '')));
    }
  }]);

  function Questionnaire(props, context) {
    _classCallCheck(this, Questionnaire);

    var _this = _possibleConstructorReturn(this, (Questionnaire.__proto__ || Object.getPrototypeOf(Questionnaire)).call(this, props, context));

    _this._checkAnsClick = _this._checkAnsClick.bind(_this);
    _this._computeResult = _this._computeResult.bind(_this);
    _this._nextQuestionClick = _this._nextQuestionClick.bind(_this);
    _this._optionClick = _this._optionClick.bind(_this);
    _this._playAgainClick = _this._playAgainClick.bind(_this);
    // this.optionListner = document.addEventListener('click', this._optionClick)
    _this._goCheckNextQuestClick = _this._goCheckNextQuestClick.bind(_this);
    _this._shareResultClick = _this._shareResultClick.bind(_this);
    _this._closeShareToolBox = _this._closeShareToolBox.bind(_this);
    _this._getResultTitle = _this._getResultTitle.bind(_this);
    return _this;
  }

  _createClass(Questionnaire, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var questionnaireTitle = _lodash2.default.get(this.props, ['questSetting', 'setting', 'title']);
      this.props.setPageType(_index.QUESTIONNAIRE);
      this.props.setPageTitle('', questionnaireTitle);
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      if (!_lodash2.default.get(this.props, ['questSetting'], null) || !_lodash2.default.get(this.props, ['questSetting', 'setting'], null)) {
        this.props.fetchQuestionnaire(_lodash2.default.get(this.props.params, ['questionnaireId'], ''));
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {}
  }, {
    key: '_checkAnsClick',
    value: function _checkAnsClick() {
      var answerSheet = _lodash2.default.get(this.refs, ['answer-sheet'], {});
      answerSheet && answerSheet.slickGoTo(1);
    }
  }, {
    key: '_goCheckNextQuestClick',
    value: function _goCheckNextQuestClick() {
      var answerSheet = _lodash2.default.get(this.refs, ['answer-sheet'], {});
      answerSheet && answerSheet.slickNext();
    }
  }, {
    key: '_nextQuestionClick',
    value: function _nextQuestionClick() {
      var nextQId = _lodash2.default.get(this.refs, ['questionnaire', 'attributes', 'data-nextQId', 'value'], '');
      this.props.goNextQuestion(nextQId, _lodash2.default.get(this.refs, ['questionnaire', 'attributes', 'data-finished', 'value']));
    }
  }, {
    key: '_optionClick',
    value: function _optionClick(e) {
      var gameFlow = _lodash2.default.get(this.props, ['questSetting', 'setting', 'gameFlow'], 'ONCE');
      var qId = _lodash2.default.get(e, ['target', 'attributes', 'data-qId', 'value']);
      var nextQId = _lodash2.default.get(e, ['target', 'attributes', 'data-nextQId', 'value']);
      var ans = _lodash2.default.get(e, ['target', 'attributes', 'data-ans', 'value']);
      if (gameFlow === 'QA') {
        this.props.passAnswer(qId, ans, qId, false, true);
      } else {
        this.props.passAnswer(qId, ans, nextQId, _lodash2.default.get(this.refs, ['questionnaire', 'attributes', 'data-finished', 'value']), false);
      }
    }
  }, {
    key: '_playAgainClick',
    value: function _playAgainClick() {
      this.props.resetQuestionnaire(_lodash2.default.get(this.refs, ['questionnaire', 'attributes', 'data-questionnaireId', 'value']), _lodash2.default.get(this.refs, ['questionnaire', 'attributes', 'data-firstQId', 'value'], ''));
    }
  }, {
    key: '_computeResult',
    value: function _computeResult() {
      var _props = this.props;
      var _props$ans = _props.ans;
      var answers = _props$ans === undefined ? [] : _props$ans;
      var _props$questSetting$s = _props.questSetting.setting.questions;
      var questions = _props$questSetting$s === undefined ? [] : _props$questSetting$s;

      var scoreArr = _lodash2.default.map(answers, function (aid, idx) {
        var _$find = _lodash2.default.find(_lodash2.default.get(questions, [idx, 'options']), { id: aid });

        var score = _$find.score;

        return score;
      });

      var _$countBy = _lodash2.default.countBy(scoreArr);

      var _$countBy$ = _$countBy['0'];
      var countWrong = _$countBy$ === undefined ? 0 : _$countBy$;

      return {
        correct: questions.length - countWrong,
        wrong: countWrong
      };
    }
  }, {
    key: '_getResultTitle',
    value: function _getResultTitle() {
      var _props2 = this.props;
      var _props2$ans = _props2.ans;
      var answers = _props2$ans === undefined ? [] : _props2$ans;
      var _props2$questSetting$ = _props2.questSetting.setting;
      var _props2$questSetting$2 = _props2$questSetting$.questions;
      var questions = _props2$questSetting$2 === undefined ? [] : _props2$questSetting$2;
      var _props2$questSetting$3 = _props2$questSetting$.results;
      var results = _props2$questSetting$3 === undefined ? [] : _props2$questSetting$3;

      var score = _lodash2.default.chain(questions).map(function (itm, idx) {
        var options = itm.options;

        var s = _lodash2.default.find(options, { id: answers[idx] })['score'];
        return s;
      }).reduce(function (t, n) {
        return t + n;
      }).value();
      var rs = _lodash2.default.chain(results).filter(function (itm) {
        return score >= itm.range.from && score < itm.range.to;
      }).first().value();
      return rs;
    }
  }, {
    key: '_closeShareToolBox',
    value: function _closeShareToolBox() {
      this.setState({
        openShareBtn: false
      });
    }
  }, {
    key: '_shareResultClick',
    value: function _shareResultClick() {
      var rs = this._getResultTitle();
      window.addthis.update('share', 'url', _index.SITE_META.URL + 'q/' + _lodash2.default.get(this.props, ['params', 'questionnaireId']) + '/' + rs.id);
      window.addthis.update('share', 'description', rs.title);
      window.addthis.update('share', 'picture', 'https:' + _lodash2.default.get(rs, ['image', 'url'], ''));
      window.addthis.update('share', 'image', 'https:' + _lodash2.default.get(rs, ['image', 'url'], ''));
      window.addthis.url = _index.SITE_META.URL + 'q/' + _lodash2.default.get(this.props, ['params', 'questionnaireId']) + '/' + rs.id;
      window.addthis.picture = 'https:' + _lodash2.default.get(rs, ['image', 'url']);
      window.addthis.image = 'https:' + _lodash2.default.get(rs, ['image', 'url']);
      this.setState({
        openShareBtn: true,
        dataUrl: _index.SITE_META.URL + 'q/' + _lodash2.default.get(this.props, ['params', 'questionnaireId']) + '/' + rs.id
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props3 = this.props;
      var _props3$ans = _props3.ans;
      var answers = _props3$ans === undefined ? null : _props3$ans;
      var finished = _props3.finished;
      var _props3$params = _props3.params;
      var _props3$params$questi = _props3$params.questionnaireId;
      var questionnaireId = _props3$params$questi === undefined ? '' : _props3$params$questi;
      var _props3$params$result = _props3$params.resultIdForOg;
      var resultIdForOg = _props3$params$result === undefined ? '' : _props3$params$result;
      var _props3$questSetting$ = _props3.questSetting.setting;
      var _props3$questSetting$2 = _props3$questSetting$.description;
      var questionnaireDesc = _props3$questSetting$2 === undefined ? '' : _props3$questSetting$2;
      var _props3$questSetting$3 = _props3$questSetting$.image;
      var questionnaireImg = _props3$questSetting$3 === undefined ? null : _props3$questSetting$3;
      var _props3$questSetting$4 = _props3$questSetting$.leading;
      var leadingType = _props3$questSetting$4 === undefined ? 'image' : _props3$questSetting$4;
      var _props3$questSetting$5 = _props3$questSetting$.questions;
      var questions = _props3$questSetting$5 === undefined ? [] : _props3$questSetting$5;
      var _props3$questSetting$6 = _props3$questSetting$.results;
      var results = _props3$questSetting$6 === undefined ? [] : _props3$questSetting$6;
      var _props3$questSetting$7 = _props3$questSetting$.subtitle;
      var questionnaireSubTitle = _props3$questSetting$7 === undefined ? '' : _props3$questSetting$7;
      var _props3$questSetting$8 = _props3$questSetting$.title;
      var questionnaireTitle = _props3$questSetting$8 === undefined ? '' : _props3$questSetting$8;
      var _props3$questSetting$9 = _props3$questSetting$.titleCustomized;
      var questionnaireTitleCust = _props3$questSetting$9 === undefined ? '' : _props3$questSetting$9;
      var _props3$questSetting$10 = _props3$questSetting$.type;
      var questionnaireType = _props3$questSetting$10 === undefined ? 'quiz' : _props3$questSetting$10;
      var showExplanation = _props3.showExplanation;

      var currQuestionId = this.props.currQuestionId ? this.props.currQuestionId : _lodash2.default.get(questions, [0, 'id']);
      var currQuestion = _lodash2.default.find(questions, { id: currQuestionId });
      var currQuestionIdx = _lodash2.default.findIndex(questions, { id: currQuestionId });
      var _answers$currQuestion = answers[currQuestionIdx];
      var ans = _answers$currQuestion === undefined ? null : _answers$currQuestion;
      var _questions$length = questions.length;
      var totalQuestions = _questions$length === undefined ? 0 : _questions$length;
      var _questions = questions[currQuestionIdx + 1];
      _questions = _questions === undefined ? { id: undefined } : _questions;
      var nextQuestionId = _questions.id;


      var finishedFlag = currQuestionIdx + 1 === totalQuestions ? true : false;
      var _currQuestion$designa = currQuestion.designated_option;
      var designatedAnsId = _currQuestion$designa === undefined ? '' : _currQuestion$designa;
      var _currQuestion$options = currQuestion.options;
      var currOption = _currQuestion$options === undefined ? [] : _currQuestion$options;
      var _currQuestion$title = currQuestion.title;
      var currQuestionTitle = _currQuestion$title === undefined ? '' : _currQuestion$title;


      var mediaSource = {
        audio: { audio: _lodash2.default.get(currQuestion, ['audio'], null) },
        heroImage: { image: _lodash2.default.get(currQuestion, ['image'], null) },
        heroVideo: { video: _lodash2.default.get(currQuestion, ['video'], null) }
      };
      var meta = {
        auto: { ograph: true },
        canonical: _index.SITE_META.URL + 'q/' + questionnaireId,
        description: questionnaireDesc ? questionnaireDesc : '',
        meta: { property: {
            'og:image': resultIdForOg.length > 0 ? _lodash2.default.get(_lodash2.default.find(results, { id: resultIdForOg }), ['image', 'url'], '') : questionnaireImg ? questionnaireImg.url : ''
          } },
        title: questionnaireTitle ? questionnaireTitle : ''
      };

      var settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        // autoplay: true,
        // autoplaySpeed: 3000,
        cssEase: 'linear',
        fade: this.props.device === 'desktop' ? true : false,
        draggable: this.props.device === 'desktop' || questionnaireType !== 'quiz' ? false : true,
        swipeToSlide: questionnaireType !== 'quiz' ? false : true,
        prevArrow: _react2.default.createElement(PrevArrow, null),
        nextArrow: _react2.default.createElement(NextArrow, null)
      };
      return _react2.default.createElement(
        _reactDocumentMeta2.default,
        meta,
        _react2.default.createElement(
          'div',
          { id: 'main', className: 'pusher middle' },
          _react2.default.createElement(
            'div',
            { className: 'Questionnaire', ref: 'questionnaire',
              'data-questionnaireId': questionnaireId,
              'data-firstQId': _lodash2.default.get(questions, [0, 'id']),
              'data-finished': finishedFlag,
              'data-nextQId': nextQuestionId },
            _react2.default.createElement(
              'div',
              { className: 'container questionnaire' },
              _react2.default.createElement(
                _QuestHeader2.default,
                { questionnaireTitle: questionnaireTitleCust && questionnaireTitleCust.trim().length > 0 ? questionnaireTitleCust : questionnaireTitle, imageSource: questionnaireImg },
                _react2.default.createElement(
                  'div',
                  { className: 'questionnaire-info' },
                  _react2.default.createElement(
                    'div',
                    { className: 'mm-mark' },
                    _react2.default.createElement(
                      'div',
                      null,
                      'MirrorMedia'
                    )
                  ),
                  _react2.default.createElement(
                    'div',
                    { className: 'process-hint-title' },
                    _react2.default.createElement(
                      'div',
                      null,
                      (!finishedFlag || answers.length !== totalQuestions) && !finished ? '' + (currQuestionIdx + 1) + '／' + totalQuestions + '　' + questionnaireSubTitle : '作答完成　' + questionnaireSubTitle
                    )
                  )
                )
              ),
              _react2.default.createElement(_WorkingProcessBar2.default, { width: (!finishedFlag || answers.length !== totalQuestions) && !finished ? currQuestionIdx / totalQuestions * 100 + '%' : '100%' }),
              function () {
                if (!finished) {
                  var _ret = function () {
                    var extraProps = !showExplanation ? {} : {
                      ans: _lodash2.default.get(_this2.props, ['ans', currQuestionIdx], null),
                      designatedAnsId: _lodash2.default.get(currQuestion, ['designated_option'])
                    };
                    var BtnNextQuestion = !showExplanation ? function () {
                      return _react2.default.createElement('div', null);
                    } : function () {
                      return _react2.default.createElement(
                        'div',
                        { className: 'button-set' },
                        _react2.default.createElement(
                          'div',
                          { className: 'button-container', style: { cursor: 'pointer' }, onClick: _this2._nextQuestionClick },
                          _react2.default.createElement(_Button2.default, { value: !finishedFlag ? '下一題' : '完成' })
                        )
                      );
                    };
                    var Explanation = !showExplanation ? function () {
                      return _react2.default.createElement('div', null);
                    } : function () {
                      return _react2.default.createElement(
                        'div',
                        { className: 'explanation' },
                        _react2.default.createElement(
                          'div',
                          { className: 'explanation-container' },
                          _lodash2.default.get(currQuestion, ['explanation'])
                        )
                      );
                    };
                    return {
                      v: _react2.default.createElement(
                        'div',
                        { className: 'question-set' },
                        _react2.default.createElement(
                          'div',
                          { className: 'question-top' },
                          _react2.default.createElement(
                            'div',
                            { className: 'question-index' },
                            _react2.default.createElement(
                              'h3',
                              null,
                              'Ｑ',
                              currQuestionIdx + 1
                            )
                          ),
                          _react2.default.createElement(
                            'div',
                            { className: 'question-content' },
                            _react2.default.createElement(
                              'div',
                              { className: 'question-content--alignbox' },
                              _react2.default.createElement(_Question2.default, { questionTitle: currQuestionTitle }),
                              _react2.default.createElement(
                                'div',
                                { style: { minHeight: '20px' } },
                                _react2.default.createElement(_Leading2.default, { leading: leadingType, mediaSource: mediaSource })
                              )
                            )
                          )
                        ),
                        _react2.default.createElement(
                          'div',
                          { className: 'options' },
                          _lodash2.default.map(currOption, function (opt, idx) {
                            var Correcting = function Correcting() {
                              return designatedAnsId === _lodash2.default.get(opt, ['id'], '') ? _react2.default.createElement('img', { className: 'correcting', src: '/asset/circle.svg' }) : ans === _lodash2.default.get(opt, ['id'], '') ? _react2.default.createElement('img', { className: 'correcting', src: '/asset/cross.svg' }) : _react2.default.createElement('span', null);
                            };
                            return _react2.default.createElement(
                              'div',
                              { className: 'option-container' + (idx + 1 !== currOption.length ? ' border--bottom' : ''), onClick: !showExplanation ? _this2._optionClick : null, style: { cursor: 'pointer' }, key: _lodash2.default.get(opt, ['id'], '') },
                              _react2.default.createElement(
                                _Option2.default,
                                _extends({ optionIndex: idx }, extraProps),
                                _react2.default.createElement(
                                  'div',
                                  { 'data-qId': currQuestionId, 'data-nextQId': nextQuestionId, 'data-ans': _lodash2.default.get(opt, ['id'], '') },
                                  _react2.default.createElement(
                                    'span',
                                    { className: 'option-index', 'data-qId': currQuestionId, 'data-nextQId': nextQuestionId, 'data-ans': _lodash2.default.get(opt, ['id'], '') },
                                    idx + 1
                                  ),
                                  _react2.default.createElement(
                                    'div',
                                    { className: 'option-content', 'data-qId': currQuestionId, 'data-nextQId': nextQuestionId, 'data-ans': _lodash2.default.get(opt, ['id'], '') },
                                    _lodash2.default.get(opt, ['title'], '')
                                  ),
                                  !showExplanation ? '' : _react2.default.createElement(Correcting, null)
                                )
                              )
                            );
                          })
                        ),
                        _react2.default.createElement(Explanation, null),
                        _react2.default.createElement(BtnNextQuestion, null)
                      )
                    };
                  }();

                  if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
                } else {
                  var answerState = _this2._computeResult();
                  return _react2.default.createElement(
                    'div',
                    { className: 'answer-sheet' },
                    _react2.default.createElement(
                      _reactSlick2.default,
                      _extends({ ref: 'answer-sheet' }, settings),
                      _react2.default.createElement(
                        'div',
                        { className: 'result-set' },
                        _react2.default.createElement(
                          'div',
                          { className: 'result-detail' },
                          '你的測驗結果',
                          _react2.default.createElement(ShowResultDetail, { answerState: answerState, ifShow: questionnaireType === 'quiz' ? true : false })
                        ),
                        _react2.default.createElement(
                          'div',
                          { className: 'result' },
                          _react2.default.createElement(_Result2.default, { results: results,
                            questions: questions, answers: answers }),
                          _react2.default.createElement(
                            'div',
                            { className: 'button-set' },
                            _react2.default.createElement(
                              'div',
                              { className: 'button-container', onClick: _this2._playAgainClick, style: { cursor: 'pointer' } },
                              _react2.default.createElement('div', { className: 'renew', style: { backgroundImage: 'url(/asset/icon02_1.svg)' } }),
                              _react2.default.createElement(_Button2.default, { value: '再玩一次' })
                            ),
                            '　',
                            questionnaireType === 'quiz' ? _react2.default.createElement(
                              'div',
                              { className: 'button-container', onClick: _this2._checkAnsClick, style: { cursor: 'pointer', marginBottom: '20px' } },
                              _react2.default.createElement('div', { className: 'check', style: { backgroundImage: 'url(/asset/icon02_1.svg)' } }),
                              _react2.default.createElement(_Button2.default, { value: '看答案' })
                            ) : _react2.default.createElement('div', { style: { display: 'inline-block' } }),
                            _react2.default.createElement(
                              'div',
                              { className: 'button-container share', onClick: _this2._shareResultClick, style: { cursor: 'pointer' } },
                              _react2.default.createElement(_Button2.default, { value: '分享結果' })
                            )
                          )
                        )
                      ),
                      questionnaireType === 'quiz' ? _lodash2.default.map(questions, function (quest, idx) {
                        var thisDesignatedAnsId = _lodash2.default.get(quest, ['designated_option']);
                        var thisAns = _lodash2.default.get(answers, [idx], null);
                        var this_mediaSource = {
                          heroImage: { image: _lodash2.default.get(quest, ['image'], null) },
                          heroVideo: { video: _lodash2.default.get(quest, ['video'], null) },
                          audio: { audio: _lodash2.default.get(quest, ['audio'], null) }
                        };
                        return _react2.default.createElement(
                          'div',
                          { className: 'question-set', key: _lodash2.default.get(quest, ['id']) },
                          _react2.default.createElement(
                            'div',
                            { className: 'question-top' },
                            _react2.default.createElement(
                              'div',
                              { className: 'question-index' },
                              _react2.default.createElement(
                                'h3',
                                null,
                                'Ｑ',
                                idx + 1
                              )
                            ),
                            _react2.default.createElement(
                              'div',
                              { className: 'question-content' },
                              _react2.default.createElement(
                                'div',
                                { className: 'question-content--alignbox' },
                                _react2.default.createElement(_Question2.default, { questionTitle: _lodash2.default.get(quest, ['title']) }),
                                _react2.default.createElement(_Leading2.default, { leading: leadingType, mediaSource: this_mediaSource })
                              )
                            )
                          ),
                          _react2.default.createElement(
                            'div',
                            { className: 'options' },
                            _lodash2.default.map(_lodash2.default.get(quest, ['options']), function (opt, i) {
                              var Correcting = function Correcting() {
                                return thisDesignatedAnsId === _lodash2.default.get(opt, ['id'], '') ? _react2.default.createElement('img', { className: 'correcting', src: '/asset/circle.svg' }) : thisAns === _lodash2.default.get(opt, ['id'], '') ? _react2.default.createElement('img', { className: 'correcting', src: '/asset/cross.svg' }) : _react2.default.createElement('span', null);
                              };
                              return _react2.default.createElement(
                                'div',
                                { className: 'option-container' + (i + 1 !== currOption.length ? ' border--bottom' : ''), key: _lodash2.default.get(opt, ['id'], '') },
                                _react2.default.createElement(
                                  _Option2.default,
                                  { optionIndex: i },
                                  _react2.default.createElement(
                                    'div',
                                    { 'data-qId': _lodash2.default.get(opt, ['id'], ''), 'data-designatedAnsId': thisDesignatedAnsId, 'data-ans': thisAns },
                                    _react2.default.createElement(
                                      'span',
                                      { className: 'option-index' },
                                      i + 1
                                    ),
                                    _react2.default.createElement(
                                      'div',
                                      { className: 'option-content' },
                                      _lodash2.default.get(opt, ['title'], '')
                                    ),
                                    _react2.default.createElement(Correcting, null)
                                  )
                                )
                              );
                            })
                          ),
                          _react2.default.createElement(
                            'div',
                            { className: 'explanation explanation--check-answer' },
                            _react2.default.createElement(
                              'div',
                              { className: 'explanation-container' },
                              _lodash2.default.get(quest, ['explanation'])
                            )
                          ),
                          _react2.default.createElement(
                            'div',
                            { className: 'button-set' },
                            _react2.default.createElement(
                              'div',
                              { className: 'button-container', style: { cursor: 'pointer' }, onClick: _this2._goCheckNextQuestClick },
                              _react2.default.createElement(_Button2.default, { value: '下一題' })
                            )
                          )
                        );
                      }) : null
                    )
                  );
                }
              }(),
              _react2.default.createElement(
                'div',
                { className: 'shareToolBox', style: !_lodash2.default.get(this.state, ['openShareBtn'], false) ? { display: 'none' } : {}, onClick: this._closeShareToolBox },
                _react2.default.createElement('div', { className: 'addthis_inline_share_toolbox' })
              )
            )
          ),
          _react2.default.createElement('script', { src: 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-584ebe7679d47dc7' })
        )
      );
    }
  }]);

  return Questionnaire;
}(_react.Component);

function mapStateToProps(state) {
  return {
    ans: state.questionnaire.ans || [],
    currQuestionId: state.questionnaire.currQuestionId || null,
    finished: state.questionnaire.finished || false,
    questSetting: state.questSetting || null,
    showExplanation: state.questionnaire.showExplanation || false
  };
}

Questionnaire.contextTypes = {
  device: _react2.default.PropTypes.string
};

var PrevArrow = function PrevArrow(props) {
  return _react2.default.createElement('div', _extends({}, props, { style: { background: 'url(' + props.src + ') no-repeat center center', height: '50px', width: '50px', left: '-50px', backgroundSize: 'cover', backgroundColor: { value: 'rgba(255,255,255,0)', important: 'true' } } }));
};

PrevArrow.defaultProps = {
  src: '/asset/icon/arrow_left.png'
};

var NextArrow = function NextArrow(props) {
  return _react2.default.createElement('div', _extends({}, props, { style: { background: 'url(' + props.src + ') no-repeat center center', height: '50px', width: '50px', right: '-50px', backgroundSize: 'cover', backgroundColor: { value: 'rgba(255,255,255,0)', important: 'true' } } }));
};

NextArrow.defaultProps = {
  src: '/asset/icon/arrow_right.png'
};

var ShowResultDetail = function ShowResultDetail(props) {
  return props.ifShow ? _react2.default.createElement(
    'div',
    { style: { display: 'inline-block' } },
    _react2.default.createElement(
      'div',
      { className: 'correcting' },
      _react2.default.createElement('img', { src: '/asset/circle.svg' }),
      ' ',
      props.answerState.correct,
      ' 題'
    ),
    _react2.default.createElement(
      'div',
      { className: 'wrong' },
      _react2.default.createElement('img', { src: '/asset/cross.svg' }),
      ' ',
      props.answerState.wrong,
      ' 題'
    )
  ) : _react2.default.createElement('div', null);
};

ShowResultDetail.defaultProps = {
  ifShow: true
};

exports.Questionnaire = Questionnaire;
exports.default = (0, _reactRedux.connect)(mapStateToProps, {
  fetchQuestionnaire: _questionnaire.fetchQuestionnaire,
  goNextQuestion: _questionnaire.goNextQuestion,
  passAnswer: _questionnaire.passAnswer,
  resetQuestionnaire: _questionnaire.resetQuestionnaire,
  setPageTitle: _header.setPageTitle,
  setPageType: _header.setPageType
})(Questionnaire);