"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

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

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

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

var _uiLayout = require("@instructure/ui-layout");

var _uiElements = require("@instructure/ui-elements");

var _IconEdit = _interopRequireDefault(require("@instructure/ui-icons/lib/Line/IconEdit"));

var _uiA11y = require("@instructure/ui-a11y");

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

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

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

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

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

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'FXOGU',
  template: function template(theme) {
    return "\n\n.quiz-core__ModerateTableRow--moderateButton {\n  float: right;\n}\n\n[dir=\"ltr\"] .quiz-core__ModerateTableRow--moderateButton {\n  float: right;\n}\n\n[dir=\"rtl\"] .quiz-core__ModerateTableRow--moderateButton {\n  float: right;\n}\n\n.quiz-core__ModerateTableRow--tableData {\n  max-width: 15rem;\n}\n\n.quiz-core__ModerateTableRow--avatarRow {\n  display: flex;\n  align-items: center;\n}\n\n.quiz-core__ModerateTableRow--avatarName {\n  margin-left: ".concat(theme.avatarNameMargin || 'inherit', ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: normal;\n  font-weight: initial;\n}\n\n.quiz-core__ModerateTableRow--tableDataItem:not(:first-child) {\n  padding-top: ").concat(theme.tableDataItemPadding || 'inherit', ";\n}\n");
  },
  'moderateButton': 'quiz-core__ModerateTableRow--moderateButton',
  'tableData': 'quiz-core__ModerateTableRow--tableData',
  'avatarRow': 'quiz-core__ModerateTableRow--avatarRow',
  'avatarName': 'quiz-core__ModerateTableRow--avatarName',
  'tableDataItem': 'quiz-core__ModerateTableRow--tableDataItem'
};
var DASHES = '---';
var ModerateTableRow = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(ModerateTableRow, _Component);

  function ModerateTableRow() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ModerateTableRow)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.handleModerateRef = function (node) {
      _this.moderateButton = node;
    };

    _this.onModerateButtonClick = function () {
      _this.props.onModerateButtonClick(_this.props.rowData);
    };

    _this.onAccommodationsClick = function () {
      _this.props.onAccommodationsClick(_this.props.rowData);
    };

    return _this;
  }

  (0, _createClass2.default)(ModerateTableRow, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.rowData.id === this.props.focusTarget && this.moderateButton) {
        this.moderateButton.focus();
      }
    }
  }, {
    key: "onResultsLinkClick",
    value: function onResultsLinkClick(quizSessionId) {
      var _this2 = this;

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

  }, {
    key: "renderScores",
    value: function renderScores(quizSessions) {
      var noScore = _react.default.createElement("div", {
        className: styles.tableDataItem
      }, _react.default.createElement(_AccessibleContent.default, {
        alt: "\u65E0\u8BC4\u5206"
      }, DASHES));

      if (!quizSessions.length) return noScore;
      return quizSessions.map(function (quizSession) {
        var result = quizSession.findAuthoritativeResult();

        if (!result) {
          return;
        }

        var message = "\u65E0\u8BC4\u5206";

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

        if (result.get('pointsPossible') === 0) {
          message = "\u4E0D\u9002\u7528";
        }

        if (quizSession.inProgress() || quizSession.reopeningGraded()) {
          var alt = "\u8FDB\u884C\u4E2D\uFF0C\u5206\u6570\u4E0D\u53EF\u7528";
          message = _react.default.createElement(_AccessibleContent.default, {
            alt: alt
          }, DASHES);
        }

        return _react.default.createElement("div", {
          key: result.get('id'),
          className: styles.tableDataItem
        }, message);
      });
    }
  }, {
    key: "attemptMessage",
    value: function attemptMessage(idx, maxAttempts) {
      var message;

      if (maxAttempts === Infinity) {
        message = "\u5C1D\u8BD5\u6B21\u6570" + (idx + 1);
      } else {
        message = "\u5C1D\u8BD5\u6B21\u6570" + (idx + 1) + " / " + maxAttempts;
      }

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

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

      if (!quizSessions.length) {
        return _react.default.createElement("div", {
          className: styles.tableDataItem
        }, _react.default.createElement(_AccessibleContent.default, {
          alt: "\u672A\u5C1D\u8BD5"
        }, DASHES));
      }

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

        var message = _this3.attemptMessage(idx, maxAttempts);

        if (_this3.props.onResultsLinkClick && quizSession.graded()) {
          return _react.default.createElement("div", {
            key: quizSessionId,
            className: styles.tableDataItem
          }, _react.default.createElement(_Link.default, {
            onClick: _this3.onResultsLinkClick(quizSessionId)
          }, message));
        } else {
          return _react.default.createElement("div", {
            key: quizSessionId,
            className: styles.tableDataItem
          }, message);
        }
      });
    }
  }, {
    key: "renderTimes",
    value: function renderTimes(quizSessions) {
      if (!quizSessions.length) {
        return _react.default.createElement("div", {
          className: styles.tableDataItem
        }, _react.default.createElement(_AccessibleContent.default, {
          alt: "\u65E0\u65F6\u95F4"
        }, DASHES));
      }

      return quizSessions.map(function (quizSession, idx) {
        var message = _react.default.createElement(_FormattedDuration.default, {
          seconds: quizSession.elapsedTime
        });

        if (quizSession.inProgress() || quizSession.reopeningGraded()) {
          var alt = "\u8FDB\u884C\u4E2D\uFF0C\u65F6\u95F4\u4E0D\u53EF\u7528";
          message = _react.default.createElement(_AccessibleContent.default, {
            alt: alt
          }, DASHES);
        }

        return _react.default.createElement("div", {
          key: quizSession.get('id'),
          className: styles.tableDataItem
        }, message);
      });
    }
  }, {
    key: "renderLogLinks",
    value: function renderLogLinks(quizSessions) {
      if (!quizSessions.length) {
        return _react.default.createElement("div", {
          className: styles.tableDataItem
        }, _react.default.createElement(_AccessibleContent.default, {
          alt: "\u65E0\u65E5\u5FD7"
        }, DASHES));
      }

      var _this$props = this.props,
          onModerateLogClick = _this$props.onModerateLogClick,
          id = _this$props.rowData.id;
      return quizSessions.map(function (quizSession) {
        var quizSessionId = quizSession.get('id');
        var message = quizSession.inProgress() || quizSession.reopeningGraded() ? "\u8FDB\u884C\u4E2D" : "\u67E5\u770B\u65E5\u5FD7";

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

        return _react.default.createElement("div", {
          key: quizSessionId,
          className: styles.tableDataItem
        }, _react.default.createElement(_Link.default, {
          onClick: onClick
        }, message));
      });
    }
  }, {
    key: "renderAccommodations",
    value: function renderAccommodations(accommodations) {
      if (this.props.onAccommodationsClick) {
        // Establish what to display about the accommodations
        var displayContent;

        if (!accommodations || accommodations.length === 0) {
          displayContent = _react.default.createElement(_uiElements.Text, {
            color: "secondary"
          }, "\u65E0");
        } else {
          displayContent = _react.default.createElement(_uiElements.List, {
            variant: "unstyled"
          }, accommodations.map(function (elem) {
            return _react.default.createElement(_uiElements.ListItem, {
              key: elem.name
            }, _react.default.createElement(_uiElements.Text, null, elem.name + "\uFF1A" + elem.value));
          }));
        } // Display the Accommodations and the button in a flex container with reverse order
        // so that the screen reader will read the accommodations first, and then the button


        return _react.default.createElement("td", null, _react.default.createElement(_uiLayout.Flex, {
          direction: "row-reverse",
          justifyItems: "end"
        }, _react.default.createElement(_uiLayout.FlexItem, null, displayContent), _react.default.createElement(_uiLayout.FlexItem, null, _react.default.createElement(_Button.default, {
          variant: "icon",
          margin: "0 x-small 0 0",
          icon: _IconEdit.default,
          onClick: this.onAccommodationsClick
        }, _react.default.createElement(_uiA11y.ScreenReaderContent, null, "\u7F16\u8F91\u5B66\u751F\u4EBA\u6570\u9650\u5236")))));
      }
    }
  }, {
    key: "renderModerate",
    value: function renderModerate() {
      if (this.props.shouldRenderModerateButton) {
        return _react.default.createElement("td", null, _react.default.createElement("div", {
          className: styles.moderateButton
        }, _react.default.createElement(_Button.default, {
          size: "small",
          onClick: this.onModerateButtonClick,
          ref: this.handleModerateRef
        }, "\u8C03\u6574")));
      }
    }
  }, {
    key: "render",
    value: function render() {
      var quizSessions = this.props.quizSessions.toArray();
      var _this$props$rowData = this.props.rowData,
          name = _this$props$rowData.name,
          avatarUrl = _this$props$rowData.avatar,
          maxAttempts = _this$props$rowData.maxAttempts,
          accommodations = _this$props$rowData.accommodations;
      var tableData = styles.tableData,
          avatarRow = styles.avatarRow,
          avatarName = styles.avatarName;
      return _react.default.createElement("tr", null, _react.default.createElement("th", {
        className: tableData,
        scope: "row"
      }, _react.default.createElement("span", {
        className: avatarRow
      }, _react.default.createElement(_PresentationContent.default, null, _react.default.createElement(_Avatar.default, {
        name: name,
        src: avatarUrl,
        size: "small"
      })), _react.default.createElement("span", {
        className: avatarName
      }, name))), _react.default.createElement("td", null, this.renderAttempts(quizSessions, maxAttempts)), _react.default.createElement("td", null, this.renderScores(quizSessions)), _react.default.createElement("td", null, this.renderTimes(quizSessions)), _react.default.createElement("td", null, this.renderLogLinks(quizSessions)), this.renderAccommodations(accommodations), this.renderModerate());
    }
  }]);
  ModerateTableRow.displayName = "ModerateTableRow";
  return ModerateTableRow;
}(_react.Component), _class2.propTypes = {
  onModerateButtonClick: _propTypes.default.func.isRequired,
  onModerateLogClick: _propTypes.default.func.isRequired,
  onAccommodationsClick: _propTypes.default.func,
  quizSessions: _reactImmutableProptypes.default.list.isRequired,
  // We are protecting against the absent prop below.
  onResultsLinkClick: _propTypes.default.func,
  rowData: _propTypes.default.shape({
    avatar: _propTypes.default.string.isRequired,
    id: _propTypes.default.string.isRequired,
    name: _propTypes.default.string.isRequired,
    quizSessionIds: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
    maxAttempts: _propTypes.default.number,
    accommodations: _propTypes.default.arrayOf(_propTypes.default.shape({
      name: _propTypes.default.string.isRequired,
      value: _propTypes.default.string.isRequired
    }))
  }).isRequired,
  shouldRenderModerateButton: _propTypes.default.bool,
  focusTarget: _propTypes.default.string
}, _class2.defaultProps = {
  shouldRenderModerateButton: true,
  focusTarget: null,
  onAccommodationsClick: null
}, _temp)) || _class);
exports.default = ModerateTableRow;