'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, _temp;

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 _Heading = require('@instructure/ui-elements/lib/components/Heading');

var _Heading2 = _interopRequireDefault(_Heading);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

var _Table = require('@instructure/ui-elements/lib/components/Table');

var _Table2 = _interopRequireDefault(_Table);

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

var _Text2 = _interopRequireDefault(_Text);

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

var _lib2 = _interopRequireDefault(_lib);

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 _constants = require('../../../../constants');

var _formatTimespan = require('../../../../common/util/formatTimespan');

var _Event = require('../../events/Event');

var _Event2 = _interopRequireDefault(_Event);

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.ModerateSession__styles__page {\n  background-color: ' + theme.pageBackgroundColor + ';\n}\n\n.ModerateSession__styles__startTime {\n  padding: ' + theme.startTimePadding + ';\n}\n\n.ModerateSession__styles__endTime {\n  padding: ' + theme.endTimePadding + ';\n}\n';
  },
  'page': 'ModerateSession__styles__page',
  'startTime': 'ModerateSession__styles__startTime',
  'endTime': 'ModerateSession__styles__endTime'
};
var ModerateSession = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp = _class2 = function (_Component) {
  (0, _inherits3.default)(ModerateSession, _Component);

  function ModerateSession() {
    (0, _classCallCheck3.default)(this, ModerateSession);
    return (0, _possibleConstructorReturn3.default)(this, (ModerateSession.__proto__ || Object.getPrototypeOf(ModerateSession)).apply(this, arguments));
  }

  (0, _createClass3.default)(ModerateSession, [{
    key: 'submittedEvent',


    // ============
    //   HELPERS
    // ============

    value: function submittedEvent() {
      return this.props.quizSessionEvents.valueSeq().find(function (event) {
        return event.get('eventType') === _constants.QUIZ_SUBMISSION_EVENT;
      });
    }
    // ===========
    //   CONFIG
    // ===========

  }, {
    key: 'startTime',
    value: function startTime() {
      var firstEvent = this.props.quizSessionEvents.first();
      if (firstEvent) {
        return firstEvent.createdDate();
      }
    }
  }, {
    key: 'endTime',
    value: function endTime() {
      // This isn't an endtime, it is a 'last seen time'
      var lastEvent = this.props.quizSessionEvents.last();
      if (lastEvent) {
        return lastEvent.createdDate();
      }
    }
  }, {
    key: 'formattedDuration',
    value: function formattedDuration() {
      if (this.startTime() && this.endTime()) {
        return (0, _formatTimespan.formatTimespan)(this.startTime(), this.endTime());
      }
    }
  }, {
    key: 'footerText',
    value: function footerText() {
      if (this.submittedEvent()) {
        return 'F\xE6rdiggjort kl. ' + _formatMessage2.default.time(this.endTime(), 'hour_minute', 'da-x-k12') + ' efter ' + this.formattedDuration();
      } else {
        return 'Session er stadig i gang';
      }
    }

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

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

      return _react2.default.createElement(
        'tbody',
        null,
        this.props.quizSessionEvents.toArray().map(function (event) {
          return _react2.default.createElement(_Event2.default, {
            event: event,
            key: event.get('createdAt'),
            startTime: _this2.startTime()
          });
        })
      );
    }
  }, {
    key: 'renderTableHeader',
    value: function renderTableHeader() {
      return _react2.default.createElement(
        'thead',
        null,
        _react2.default.createElement(
          'tr',
          null,
          _react2.default.createElement(
            'th',
            null,
            _react2.default.createElement(
              'span',
              { 'aria-hidden': 'true', role: 'presentation' },
              'Forl\xF8bet tid'
            ),
            _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              'Forl\xF8bet tid siden start'
            )
          ),
          _react2.default.createElement(
            'th',
            null,
            _react2.default.createElement(
              'span',
              { 'aria-hidden': 'true', role: 'presentation' },
              'Begivenhedsdetaljer'
            ),
            _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              'Detaljer om den registrerede begivenhed'
            )
          )
        )
      );
    }
  }, {
    key: 'renderHiddenHeader',
    value: function renderHiddenHeader() {
      return _react2.default.createElement(
        _ScreenReaderContent2.default,
        null,
        _react2.default.createElement(
          _Heading2.default,
          { level: 'h2' },
          'Log over elevers begivenheder'
        )
      );
    }
  }, {
    key: 'renderContent',
    value: function renderContent() {
      if (this.props.isFetching) {
        return _react2.default.createElement(_Spinner2.default, null);
      }

      if (!this.props.quizSessionEvents.size) {
        return _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            _Text2.default,
            null,
            'Der er ikke nogen sessions-begivenheder at vise endnu.'
          )
        );
      }

      return _react2.default.createElement(
        'div',
        null,
        this.renderHiddenHeader(),
        _react2.default.createElement(
          'div',
          { className: styles.startTime },
          _react2.default.createElement(
            _Heading2.default,
            { level: 'h4', as: 'h3' },
            'Begyndte ' + _formatMessage2.default.date(this.startTime(), 'datetime_long', 'da-x-k12')
          )
        ),
        _react2.default.createElement(
          _Table2.default,
          {
            hover: true,
            caption: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              'Log over elevers begivenheder'
            )
          },
          this.renderTableHeader(),
          this.renderEvents()
        ),
        _react2.default.createElement(
          'div',
          { className: styles.endTime },
          _react2.default.createElement(
            _Heading2.default,
            { level: 'h4', as: 'h3' },
            this.footerText()
          )
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _Page2.default,
        null,
        _react2.default.createElement(
          'div',
          { className: styles.page },
          this.renderContent()
        )
      );
    }
  }]);
  ModerateSession.displayName = 'ModerateSession'
  ;
  return ModerateSession;
}(_react.Component), _class2.propTypes = {
  isFetching: _propTypes2.default.bool.isRequired,
  quizSessionEvents: _reactImmutableProptypes2.default.list.isRequired }, _temp)) || _class);
exports.default = ModerateSession;