'use strict';

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

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _dec, _class, _class2, _temp2;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Alert = require('@instructure/ui-alerts/lib/components/Alert');

var _Alert2 = _interopRequireDefault(_Alert);

var _Button = require('@instructure/ui-buttons/lib/components/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Heading = require('@instructure/ui-elements/lib/components/Heading');

var _Heading2 = _interopRequireDefault(_Heading);

var _Text = require('@instructure/ui-elements/lib/components/Text');

var _Text2 = _interopRequireDefault(_Text);

var _TextInput = require('@instructure/ui-forms/lib/components/TextInput');

var _TextInput2 = _interopRequireDefault(_TextInput);

var _ScreenReaderContent = require('@instructure/ui-a11y/lib/components/ScreenReaderContent');

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

var _lib = require('@instructure/ui-themeable/lib');

var _lib2 = _interopRequireDefault(_lib);

var _RichContentRenderer = require('quiz-interactions/lib/components/common/components/rce/RichContentRenderer');

var _RichContentRenderer2 = _interopRequireDefault(_RichContentRenderer);

var _AttemptHistory = require('../../AttemptHistory');

var _AttemptHistory2 = _interopRequireDefault(_AttemptHistory);

var _QuizInfo = require('./QuizInfo');

var _QuizInfo2 = _interopRequireDefault(_QuizInfo);

var _CustomPropTypes = require('../../../../common/util/CustomPropTypes');

var _CustomPropTypes2 = _interopRequireDefault(_CustomPropTypes);

var _Card = require('../../../../common/components/shared/Card');

var _Card2 = _interopRequireDefault(_Card);

var _Page = require('../../../../common/components/layout/Page');

var _Page2 = _interopRequireDefault(_Page);

var _Spinner = require('../../../../common/components/shared/spinner/Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

var _formatMessage = require('../../../../common/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _theme = require('./theme');

var _theme2 = _interopRequireDefault(_theme);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n.Show__styles__quizShow {\n  padding: ' + theme.quizShowPadding + ' 0;\n  width: 100%;\n}\n\n.Show__styles__sectionWrapper {\n  box-sizing: border-box;\n  padding: ' + theme.sectionWrapperPadding + ' ' + theme.sectionWrapperPaddingSide + ' ' + theme.sectionWrapperPadding + ' ' + theme.sectionWrapperPaddingSide + ';\n  min-height: 3.25rem;\n  margin-bottom: ' + theme.sectionWrapperMargin + ';\n}\n\n.Show__styles__clearfix::after {\n  clear: both;\n  content: "";\n  display: table;\n}\n\n[dir="ltr"] .Show__styles__clearfix::after {\n  clear: both;\n}\n\n[dir="rtl"] .Show__styles__clearfix::after {\n  clear: both;\n}\n\n.Show__styles__accessCodeWrapper > div {\n  display: block;\n  margin-top: ' + theme.accessCodeWrapperMargin + ';\n  margin-bottom: ' + theme.accessCodeWrapperMargin + ';\n}\n';
  },
  'quizShow': 'Show__styles__quizShow',
  'sectionWrapper': 'Show__styles__sectionWrapper',
  'clearfix': 'Show__styles__clearfix',
  'accessCodeWrapper': 'Show__styles__accessCodeWrapper'
};


// ================================

// this is the landing page for a student
// to come begin their quiz taking

// ================================

var Show = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(Show, _Component);

  function Show() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Show);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Show.__proto__ || Object.getPrototypeOf(Show)).call.apply(_ref, [this].concat(args))), _this), _this.storeBeginButtonRef = function (c) {
      _this.beginButtonRef = c;
    }, _this.checkSubmitAcessCode = function (e) {
      if (e.keyCode === 13) {
        _this.submitAccessCode();
      }
    }, _this.submitAccessCode = function () {
      if (_this.props.accessCode.length > 0) {
        _this.props.submitStudentAccessCode(_this.props.quizSession.id, _this.props.accessCode);
      }
    }, _this.renderAccessCodeAlert = function () {
      // null won't display anything
      if (_this.props.accessCodeStatus === false) {
        return _react2.default.createElement(
          _Alert2.default,
          { variant: 'error', closeButtonLabel: 'Lukk', margin: 'small none' },
          'Ugyldig tilgangskode!'
        );
      } else if (_this.props.accessCodeStatus === true) {
        return _react2.default.createElement(
          _Alert2.default,
          { variant: 'success', closeButtonLabel: 'Lukk', margin: 'small none' },
          'Tilgangskode vellykket N\xE5 kan du begynne denne vurderingen.'
        );
      }
    }, _this.updateAccessCode = function (event) {
      var updateAccessCodeUi = _this.props.updateAccessCodeUi;

      updateAccessCodeUi(_this.accessCodeInput.value);
    }, _this.handleAccessCodeInputRef = function (node) {
      _this.accessCodeInput = node;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Show, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _props = this.props,
          quizSessionId = _props.quizSessionId,
          confirmSessionStartPage = _props.confirmSessionStartPage;

      confirmSessionStartPage(quizSessionId);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      var _props2 = this.props,
          updateAccessCodeUi = _props2.updateAccessCodeUi,
          clearAccessCodeStatus = _props2.clearAccessCodeStatus;

      updateAccessCodeUi('');
      clearAccessCodeStatus();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var _props3 = this.props,
          accessCodeStatus = _props3.accessCodeStatus,
          shouldShowLinkButton = _props3.shouldShowLinkButton;

      if (accessCodeStatus && shouldShowLinkButton) {
        _reactDom2.default.findDOMNode(this.beginButtonRef).focus();
      }
    }
  }, {
    key: 'handleLinkButtonClick',
    value: function handleLinkButtonClick() {
      var quizSession = this.props.quizSession;

      if (quizSession.graded()) return this.props.onIsGraded;
      if (quizSession.needsGrading()) return this.props.onNeedsGrading;
      if (quizSession.taking()) return this.props.onInProgress;
      if (quizSession.pending() || quizSession.failedToStart()) return this.props.onIsPending;
    }
  }, {
    key: 'buttonLabel',
    value: function buttonLabel() {
      if (this.props.buttonLabel) return this.props.buttonLabel;

      var quizSession = this.props.quizSession;

      if (quizSession.submitted()) return 'Se resultater';
      if (quizSession.pending() || quizSession.failedToStart()) return 'Start';
      return 'Gjenoppta';
    }
  }, {
    key: 'renderLinkButton',
    value: function renderLinkButton() {
      if (!this.props.shouldShowLinkButton) {
        return null;
      }

      return _react2.default.createElement(
        _Button2.default,
        {
          ref: this.storeBeginButtonRef,
          variant: 'primary',
          onClick: this.handleLinkButtonClick()
        },
        this.buttonLabel()
      );
    }
  }, {
    key: 'renderBacktrackingAlert',
    value: function renderBacktrackingAlert() {
      if (!this.props.isOneAtATime || this.props.allowBacktracking) {
        return;
      }
      return _react2.default.createElement(
        'div',
        { className: styles.sectionWrapper },
        _react2.default.createElement(
          _Alert2.default,
          { variant: 'info' },
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              _Text2.default,
              { lineHeight: 'double' },
              _react2.default.createElement(
                _Text2.default,
                { weight: 'bold' },
                'Backtracking deaktivert'
              ),
              _react2.default.createElement('br', null),
              _react2.default.createElement(
                _Text2.default,
                { weight: 'light' },
                'Denne vurderingen er levert et sp\xF8rsm\xE5l om gangen. \xC5 se p\xE5 og g\xE5 tilbake til\n                  et tidligere besvart sp\xF8rsm\xE5l (backtracking) er ikke tillatt. Utvis forsiktighet\n                  n\xE5r du navigerer denne vurderingen.'
              )
            )
          )
        )
      );
    }
  }, {
    key: 'renderAccessCode',
    value: function renderAccessCode() {
      if (!this.props.accessCodePromptPermitted || this.props.quizSession.submitted()) {
        return null;
      }

      if (this.props.quiz.requireStudentAccessCode && !this.props.quizSession.acceptedStudentAccessCode) {
        var messages = this.props.accessCodeStatus === false ? [{ text: 'Skriv inn et gyldig passord', type: 'error' }] : [];

        return _react2.default.createElement(
          'div',
          { className: styles.accessCodeWrapper },
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              _Text2.default,
              null,
              this.props.quizSession.pending() ? 'Tilgangskode kreves for \xE5 starte' : 'Tilgangskode kreves for \xE5 fortsette'
            )
          ),
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(_TextInput2.default, {
              inputRef: this.handleAccessCodeInputRef,
              label: _react2.default.createElement(
                _ScreenReaderContent2.default,
                null,
                'Tilgangskode'
              ),
              inline: true,
              type: 'text',
              messages: messages,
              onChange: this.updateAccessCode,
              onKeyDown: this.checkSubmitAcessCode,
              'data-automation': 'sdk-access-code-textinput'
            })
          ),
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              _Button2.default,
              {
                variant: 'primary',
                onClick: this.submitAccessCode,
                disabled: this.props.accessCode.length === 0,
                'data-automation': 'sdk-submit-access-code-button'
              },
              'Send inn'
            )
          )
        );
      }
    }
  }, {
    key: 'renderChildren',
    value: function renderChildren() {
      if (this.props.children) {
        return _react2.default.createElement(
          'div',
          { className: styles.sectionWrapper },
          this.props.children
        );
      }
    }
  }, {
    key: 'renderSubmitSection',
    value: function renderSubmitSection() {
      // Only render this stuff if ip validation is enabled
      if (this.props.quiz.filterIpAddress && !this.props.quizSession.ipIsAllowed) {
        return _react2.default.createElement(
          _Alert2.default,
          { variant: 'error', margin: 'small' },
          'Din IP adresse er ikke autorisert'
        );
      } else if (!this.props.quiz.valid) {
        return _react2.default.createElement(
          _Alert2.default,
          { variant: 'error', margin: 'small' },
          'Det er et problem med denne vurderingen Kontakt din instrukt\xF8r.'
        );
      } else {
        return _react2.default.createElement(
          'div',
          { className: styles.sectionWrapper },
          _react2.default.createElement(_AttemptHistory2.default, {
            attemptHistory: this.props.attemptHistory,
            onAttemptClick: this.props.onAttemptClick,
            quizId: this.props.quiz.id,
            scoreToKeep: this.props.scoreToKeep,
            selectedSessionId: this.props.quizSessionId
          }),
          this.renderAccessCodeAlert(),
          this.renderAccessCode(),
          this.renderLinkButton()
        );
      }
    }
  }, {
    key: 'renderShow',
    value: function renderShow() {
      var instructionClasses = (0, _classnames2.default)(styles.sectionWrapper, styles.clearfix);
      return _react2.default.createElement(
        _Page2.default,
        null,
        _react2.default.createElement(
          _Card2.default,
          { wrapped: true, className: styles.quizShow },
          _react2.default.createElement(
            'div',
            { className: styles.sectionWrapper },
            _react2.default.createElement(
              _Heading2.default,
              { level: 'h1' },
              this.props.quiz.title
            )
          ),
          _react2.default.createElement(
            'div',
            { className: instructionClasses },
            _react2.default.createElement(_RichContentRenderer2.default, { content: this.props.quiz.instructions })
          ),
          _react2.default.createElement(
            'div',
            { className: styles.sectionWrapper },
            _react2.default.createElement(_QuizInfo2.default, {
              quiz: this.props.quiz,
              quizSession: this.props.quizSession,
              extraInfoBoxes: this.props.extraInfoBoxes
            })
          ),
          this.renderChildren(),
          this.renderBacktrackingAlert(),
          this.renderSubmitSection()
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      if (this.props.quizSession.isLoaded()) {
        return this.renderShow();
      } else {
        return _react2.default.createElement(
          _Card2.default,
          { wrapped: true },
          _react2.default.createElement(_Spinner2.default, null)
        );
      }
    }
  }]);
  Show.displayName = 'Show'
  ;
  return Show;
}(_react.Component), _class2.propTypes = {
  accessCode: _propTypes2.default.string.isRequired,
  accessCodeStatus: _propTypes2.default.bool,
  allowBacktracking: _propTypes2.default.bool.isRequired,
  attemptHistory: _CustomPropTypes2.default.attemptHistory,
  buttonLabel: _propTypes2.default.string,
  children: _propTypes2.default.node,
  clearAccessCodeStatus: _propTypes2.default.func.isRequired,
  confirmSessionStartPage: _propTypes2.default.func.isRequired,
  // TODO: Figure out if this is actually needed since it's not being used in the component
  contentRole: _propTypes2.default.string,
  extraInfoBoxes: _QuizInfo2.default.propTypes.extraInfoBoxes,
  accessCodePromptPermitted: _propTypes2.default.bool,
  isOneAtATime: _propTypes2.default.bool.isRequired,
  onAttemptClick: _propTypes2.default.func,
  onInProgress: _propTypes2.default.func.isRequired,
  onIsGraded: _propTypes2.default.func,
  onIsPending: _propTypes2.default.func.isRequired,
  onNeedsGrading: _propTypes2.default.func,
  quiz: _reactImmutableProptypes2.default.record,
  quizSession: _reactImmutableProptypes2.default.record,
  quizSessionId: _propTypes2.default.string.isRequired,
  scoreToKeep: _propTypes2.default.string,
  shouldShowLinkButton: _propTypes2.default.bool.isRequired,
  submitStudentAccessCode: _propTypes2.default.func.isRequired,
  updateAccessCodeUi: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  accessCodeStatus: null,
  attemptHistory: null,
  buttonLabel: null,
  children: null,
  extraInfoBoxes: [],
  accessCodePromptPermitted: true,
  onAttemptClick: function onAttemptClick() {},
  onIsGraded: function onIsGraded() {},
  onNeedsGrading: function onNeedsGrading() {},

  quiz: null,
  quizSession: null,
  scoreToKeep: 'highest'
}, _temp2)) || _class);
exports.default = Show;