'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; /* eslint "array-callback-return": "warn" */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _AccessibleContent = require('@instructure/ui-a11y/lib/components/AccessibleContent');

var _AccessibleContent2 = _interopRequireDefault(_AccessibleContent);

var _Avatar = require('@instructure/ui-elements/lib/components/Avatar');

var _Avatar2 = _interopRequireDefault(_Avatar);

var _Link = require('@instructure/ui-elements/lib/components/Link');

var _Link2 = _interopRequireDefault(_Link);

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

var _Button2 = _interopRequireDefault(_Button);

var _PresentationContent = require('@instructure/ui-a11y/lib/components/PresentationContent');

var _PresentationContent2 = _interopRequireDefault(_PresentationContent);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _FormattedDuration = require('../../../../common/components/shared/FormattedDuration');

var _FormattedDuration2 = _interopRequireDefault(_FormattedDuration);

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.ModerateTableRow__styles__moderateButton {\n  float: right;\n}\n\n[dir="ltr"] .ModerateTableRow__styles__moderateButton {\n  float: right;\n}\n\n[dir="rtl"] .ModerateTableRow__styles__moderateButton {\n  float: right;\n}\n\n.ModerateTableRow__styles__tableData {\n  max-width: 15rem;\n}\n\n.ModerateTableRow__styles__avatarRow {\n  display: flex;\n  align-items: center;\n}\n\n.ModerateTableRow__styles__avatarName {\n  margin-left: ' + theme.avatarNameMargin + ';\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: normal;\n  font-weight: initial;\n}\n\n.ModerateTableRow__styles__tableDataItem:not(:first-child) {\n  padding-top: ' + theme.tableDataItemPadding + ';\n}\n';
  },
  'moderateButton': 'ModerateTableRow__styles__moderateButton',
  'tableData': 'ModerateTableRow__styles__tableData',
  'avatarRow': 'ModerateTableRow__styles__avatarRow',
  'avatarName': 'ModerateTableRow__styles__avatarName',
  'tableDataItem': 'ModerateTableRow__styles__tableDataItem'
};
var ModerateTableRow = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(ModerateTableRow, _Component);

  function ModerateTableRow() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = ModerateTableRow.__proto__ || Object.getPrototypeOf(ModerateTableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleModerateRef = function (node) {
      _this.moderateButton = node;
    }, _this.onModerateButtonClick = function () {
      _this.props.onModerateButtonClick(_this.props.rowData);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }
  // ===========
  //   CONFIG
  // ===========

  (0, _createClass3.default)(ModerateTableRow, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.props.rowData.id === this.props.focusTarget && this.moderateButton) {
        this.moderateButton.focus();
      }
    }

    // =============
    //   Callbacks
    // =============

  }, {
    key: 'onResultsLinkClick',
    value: function onResultsLinkClick(quizSessionId) {
      var _this2 = this;

      return function () {
        _this2.props.onResultsLinkClick(quizSessionId);
      };
    }

    // =============
    //   RENDERING
    // =============

  }, {
    key: 'renderScores',
    value: function renderScores(quizSessions) {
      var noScore = _react2.default.createElement(
        'div',
        { className: styles.tableDataItem },
        _react2.default.createElement(
          _AccessibleContent2.default,
          { alt: 'Geen score' },
          '---'
        )
      );

      if (!quizSessions.length) return noScore;

      return quizSessions.map(function (quizSession) {
        var result = quizSession.findAuthoritativeResult();

        if (!result) {
          return;
        }

        var message = 'Geen score';

        if (result.get('score') != null) {
          var percentage = result.get('score') / result.get('pointsPossible');
          message = _formatMessage2.default.number(percentage, 'percent');
        }

        if (result.get('pointsPossible') === 0) {
          message = 'Niet van toepassing';
        }

        if (quizSession.inProgress() || quizSession.reopeningGraded()) {
          var alt = 'In voortgang, score niet beschikbaar';
          message = _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: alt },
            '---'
          );
        }

        return _react2.default.createElement(
          'div',
          {
            key: result.get('id'),
            className: styles.tableDataItem
          },
          message
        );
      });
    }
  }, {
    key: 'attemptMessage',
    value: function attemptMessage(idx, maxAttempts) {
      var message = void 0;
      if (maxAttempts === Infinity) {
        message = 'Poging ' + (idx + 1);
      } else {
        message = 'Poging ' + (idx + 1) + ' / ' + maxAttempts;
      }

      return message;
    }
  }, {
    key: 'renderAttempts',
    value: function renderAttempts(quizSessions) {
      var _this3 = this;

      var maxAttempts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : quizSessions.length;

      if (!quizSessions.length) {
        return _react2.default.createElement(
          'div',
          { className: styles.tableDataItem },
          _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: 'Geen poging' },
            '---'
          )
        );
      }

      return quizSessions.map(function (quizSession, idx) {
        var quizSessionId = quizSession.get('id');
        var message = _this3.attemptMessage(idx, maxAttempts);

        if (_this3.props.onResultsLinkClick && quizSession.graded()) {
          return _react2.default.createElement(
            'div',
            {
              key: quizSessionId,
              className: styles.tableDataItem
            },
            _react2.default.createElement(
              _Link2.default,
              { onClick: _this3.onResultsLinkClick(quizSessionId) },
              message
            )
          );
        } else {
          return _react2.default.createElement(
            'div',
            {
              key: quizSessionId,
              className: styles.tableDataItem
            },
            message
          );
        }
      });
    }
  }, {
    key: 'renderTimes',
    value: function renderTimes(quizSessions) {
      if (!quizSessions.length) {
        return _react2.default.createElement(
          'div',
          { className: styles.tableDataItem },
          _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: 'Geen tijd' },
            '---'
          )
        );
      }

      return quizSessions.map(function (quizSession, idx) {
        var message = _react2.default.createElement(_FormattedDuration2.default, { timeLimitInSeconds: quizSession.elapsedTime });

        if (quizSession.inProgress() || quizSession.reopeningGraded()) {
          var alt = 'In voortgang, tijd niet beschikbaar';
          message = _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: alt },
            '---'
          );
        }

        return _react2.default.createElement(
          'div',
          {
            key: quizSession.get('id'),
            className: styles.tableDataItem
          },
          message
        );
      });
    }
  }, {
    key: 'renderLogLinks',
    value: function renderLogLinks(quizSessions) {
      if (!quizSessions.length) {
        return _react2.default.createElement(
          'div',
          { className: styles.tableDataItem },
          _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: 'Geen logboek' },
            '---'
          )
        );
      }

      var _props = this.props,
          onModerateLogClick = _props.onModerateLogClick,
          id = _props.rowData.id;


      return quizSessions.map(function (quizSession) {
        var quizSessionId = quizSession.get('id');

        var message = quizSession.inProgress() || quizSession.reopeningGraded() ? 'In voortgang' : 'Logboek weergeven';

        function onClick(event) {
          onModerateLogClick({ id: id, event: event, quizSessionId: quizSessionId });
        }

        return _react2.default.createElement(
          'div',
          {
            key: quizSessionId,
            className: styles.tableDataItem
          },
          _react2.default.createElement(
            _Link2.default,
            { onClick: onClick },
            message
          )
        );
      });
    }
  }, {
    key: 'renderModerate',
    value: function renderModerate() {
      if (this.props.shouldRenderModerateButton) {
        return _react2.default.createElement(
          'td',
          null,
          _react2.default.createElement(
            'div',
            { className: styles.moderateButton },
            _react2.default.createElement(
              _Button2.default,
              { size: 'small', onClick: this.onModerateButtonClick, ref: this.handleModerateRef },
              'Modereren'
            )
          )
        );
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var quizSessions = this.props.quizSessions.toArray();
      var _props$rowData = this.props.rowData,
          name = _props$rowData.name,
          avatarUrl = _props$rowData.avatar,
          maxAttempts = _props$rowData.maxAttempts;
      var tableData = styles.tableData,
          avatarRow = styles.avatarRow,
          avatarName = styles.avatarName;


      return _react2.default.createElement(
        'tr',
        null,
        _react2.default.createElement(
          'th',
          { className: tableData, scope: 'row' },
          _react2.default.createElement(
            'span',
            { className: avatarRow },
            _react2.default.createElement(
              _PresentationContent2.default,
              null,
              _react2.default.createElement(_Avatar2.default, { name: name, src: avatarUrl, size: 'small' })
            ),
            _react2.default.createElement(
              'span',
              { className: avatarName },
              name
            )
          )
        ),
        _react2.default.createElement(
          'td',
          null,
          this.renderAttempts(quizSessions, maxAttempts)
        ),
        _react2.default.createElement(
          'td',
          null,
          this.renderScores(quizSessions)
        ),
        _react2.default.createElement(
          'td',
          null,
          this.renderTimes(quizSessions)
        ),
        _react2.default.createElement(
          'td',
          null,
          this.renderLogLinks(quizSessions)
        ),
        this.renderModerate()
      );
    }
  }]);
  ModerateTableRow.displayName = 'ModerateTableRow'
  ;
  return ModerateTableRow;
}(_react.Component), _class2.propTypes = {
  onModerateButtonClick: _propTypes2.default.func.isRequired,
  onModerateLogClick: _propTypes2.default.func.isRequired,
  quizSessions: _reactImmutableProptypes2.default.list.isRequired,
  // We are protecting against the absent prop below.
  onResultsLinkClick: _propTypes2.default.func,
  rowData: _propTypes2.default.shape({
    avatar: _propTypes2.default.string.isRequired,
    id: _propTypes2.default.string.isRequired,
    name: _propTypes2.default.string.isRequired,
    quizSessionIds: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
    maxAttempts: _propTypes2.default.number
  }).isRequired,
  shouldRenderModerateButton: _propTypes2.default.bool,
  focusTarget: _propTypes2.default.string
}, _class2.defaultProps = {
  shouldRenderModerateButton: true,
  focusTarget: null
}, _temp2)) || _class);
exports.default = ModerateTableRow;