'use strict';

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

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,
    _default_frCA_number = Intl.NumberFormat('fr-CA', { style: 'decimal' }).format;

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 _partial = require('lodash/partial');

var _partial2 = _interopRequireDefault(_partial);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

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

var _TextInput2 = _interopRequireDefault(_TextInput);

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

var _lib2 = _interopRequireDefault(_lib);

var _IconBank = require('@instructure/ui-icons/lib/Line/IconBank');

var _IconBank2 = _interopRequireDefault(_IconBank);

var _formatMessage = require('@instructure/quiz-common/lib/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _PositionBox = require('../../../../../../common/components/resources/positionBox/PositionBox');

var _PositionBox2 = _interopRequireDefault(_PositionBox);

var _Item = require('../../../../../../common/records/Item');

var _Item2 = _interopRequireDefault(_Item);

var _ActionButtons = require('../../../ActionButtons');

var _ActionButtons2 = _interopRequireDefault(_ActionButtons);

var _constants = require('@instructure/quiz-common/lib/constants');

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.Header__styles__header {\n  background-color: ' + theme.headerBackgroundColor + ';\n  color: ' + theme.headerColor + ';\n\n  padding: ' + theme.headerPadding + ';\n\n  display: flex;\n  justify-content: space-between;\n  vertical-align: middle;\n  align-items: center;\n}\n\n.Header__styles__leftHeader {\n  flex: 8 0 0;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  /* fix for ie11 */\n\n  width: 100%;\n}\n\n.Header__styles__interactionType {\n  font-size: ' + theme.interactionTypeFontSize + ';\n  margin-left: ' + theme.interactionTypeLeftMargin + ';\n  margin-right: ' + theme.interactionTypeRightMargin + ';\n}\n\n.Header__styles__dividingLine {\n  width: 0;\n  border-left: ' + theme.dividingLineLeftBorder + ';\n}\n\n.Header__styles__titleHolder {\n  display: flex;\n  flex: 1 1 auto;\n}\n\n.Header__styles__titleInput {\n  flex: 1 1 auto;\n  font-size: ' + theme.titleInputFontSize + ';\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n';
  },
  'header': 'Header__styles__header',
  'leftHeader': 'Header__styles__leftHeader',
  'interactionType': 'Header__styles__interactionType',
  'dividingLine': 'Header__styles__dividingLine',
  'titleHolder': 'Header__styles__titleHolder',
  'titleInput': 'Header__styles__titleInput'
};
var QuizEntryHeader = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(QuizEntryHeader, _Component);

  function QuizEntryHeader() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = QuizEntryHeader.__proto__ || Object.getPrototypeOf(QuizEntryHeader)).call.apply(_ref, [this].concat(args))), _this), _this.connectDragSource = function (dragHandle) {
      if (_this.shouldDisableDragHandle()) {
        return dragHandle;
      }
      return _this.props.connectDragSource(dragHandle);
    }, _this.clearModifications = function () {
      _this.props.clearModifications('items', _this.props.entry.id);
    }, _this.removeTemporaryItem = function () {
      var remove = function remove() {
        _this.props.hideError(_this.props.guid);
        _this.clearModifications();
        _this.props.clearTemporaryItem(_this.props.quizId);
        _this.props.setUi(_constants.DELETED_QUIZ_ENTRY, {
          position: Math.ceil(_this.props.quizEntry.position),
          inStimulus: _this.props.quizEntry.hasStimulus
        });
      };
      _this.props.withConfirm(remove, _this.removalDialogData());
    }, _this.removeNormalItem = function () {
      _this.props.withConfirm((0, _partial2.default)(_this.props.removeQuizEntry, _this.props.quizId, _this.props.quizEntry), _this.removalDialogData());
    }, _this.removeItem = function (e) {
      if (_this.props.disabledForRegrade) {
        return null;
      }
      _this.props.entry.isTemporary() ? _this.removeTemporaryItem() : _this.removeNormalItem();
    }, _this.handleTitleChange = function (event) {
      _this.props.changeItemTitle(_this.props.entry.id, event.target.value);
    }, _this.storeTitleRef = function (el) {
      _this.titleRef = el;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(QuizEntryHeader, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      // timeout is to ensure the screenreader reads the title label when focused
      setTimeout(function () {
        !_this2.props.initialFocusId && _this2.titleRef && _this2.titleRef.focus();
      }, 200); // without the 200, the black VO focus-box, and the actual focus
      // end up in different places after saving, and re-editing
    }
  }, {
    key: 'removalDialogData',
    value: function removalDialogData() {
      return {
        title: 'Supprimer l\u2019\xE9l\xE9ment?',
        text: '\xCAtes-vous certain de vouloir retirer cet \xE9l\xE9ment?',
        continueText: 'Supprimer l\u2019\xE9l\xE9ment',
        cancelText: 'Conserver \xE9l\xE9ment'
      };
    }
  }, {
    key: 'getVOText',
    value: function getVOText(verb, displayPosition) {
      var name = '';
      if (this.props.entry instanceof _Item2.default) {
        name = this.props.entry.getInteractionType().name;
      }
      return verb + ' Question ' + displayPosition + ' ' + name;
    }
  }, {
    key: 'renderBankedContent',
    value: function renderBankedContent() {
      if (this.props.quizEntry.entryType === 'Bank' || this.props.quizEntry.entryType === 'BankEntry') {
        return _react2.default.createElement(_IconBank2.default, null);
      }
    }
  }, {
    key: 'renderTitleHolder',
    value: function renderTitleHolder() {
      if (!(this.props.entry instanceof _Item2.default)) return;
      var _props = this.props,
          entry = _props.entry,
          shouldClone = _props.shouldClone,
          quizEntry = _props.quizEntry,
          disabledForRegrade = _props.disabledForRegrade,
          displayPosition = _props.displayPosition,
          workingEntry = _props.workingEntry;


      var disabled = disabledForRegrade || entry.isImmutable() && !shouldClone || quizEntry.isBankEntry;
      var titleLabelText = 'Question ' + displayPosition + ', ' + entry.getInteractionType().name + ', modifier le titre de la question';
      return _react2.default.createElement(
        'div',
        { className: styles.titleHolder },
        _react2.default.createElement(
          'span',
          { className: styles.titleInput },
          _react2.default.createElement(_TextInput2.default, {
            ref: this.storeTitleRef,
            label: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              titleLabelText
            ),
            type: 'text',
            placeholder: 'Nom de la question',
            onChange: this.handleTitleChange,
            value: workingEntry.title || '',
            disabled: disabled,
            'data-automation': 'sdk-question-title-textinput'
          })
        )
      );
    }
  }, {
    key: 'renderLeftHeader',
    value: function renderLeftHeader() {
      var positionText = 'Modifier l\u2019\xE9l\xE9ment \xE0 la position ' + _default_frCA_number(this.props.displayPosition);

      return _react2.default.createElement(
        'div',
        { className: styles.leftHeader },
        _react2.default.createElement(_PositionBox2.default, {
          position: this.props.quizEntry.positionToDisplay(this.props.displayPosition),
          headingText: positionText,
          'data-automation': 'sdk-quiz-entry-positionbox'
        }),
        this.renderBankedContent(),
        _react2.default.createElement(
          'div',
          {
            className: styles.interactionType,
            'data-automation': 'sdk-quiz-entry-interaction-type'
          },
          this.props.name
        ),
        _react2.default.createElement('div', { className: styles.dividingLine }),
        this.renderTitleHolder()
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var actionButtonProps = {
        connectDragSource: this.connectDragSource,
        displayPosition: this.props.displayPosition,
        onDelete: this.removeItem,
        deleteText: this.getVOText('Remove', this.props.displayPosition),
        quizEntries: this.props.quizEntries,
        quizEntry: this.props.quizEntry,
        shouldDisableDragHandle: true,
        shouldDisableDeleteButton: this.props.disabledForRegrade,
        shouldRenderEdit: false
      };

      return _react2.default.createElement(
        'div',
        { className: styles.header },
        this.renderLeftHeader(),
        _react2.default.createElement(_ActionButtons2.default, actionButtonProps)
      );
    }
  }]);
  QuizEntryHeader.displayName = 'QuizEntryHeader'
  ;
  return QuizEntryHeader;
}(_react.Component), _class2.propTypes = {
  changeItemTitle: _propTypes2.default.func.isRequired, // from connected component
  clearModifications: _propTypes2.default.func.isRequired, // from connected component
  clearTemporaryItem: _propTypes2.default.func.isRequired, // from connected component
  connectDragSource: _propTypes2.default.func.isRequired, // inserted from React DnD
  disabledForRegrade: _propTypes2.default.bool,
  displayPosition: _propTypes2.default.number.isRequired,
  entry: _reactImmutableProptypes2.default.record.isRequired,
  guid: _propTypes2.default.string.isRequired,
  hideError: _propTypes2.default.func.isRequired, // from connected component
  initialFocusId: _propTypes2.default.string,
  name: _propTypes2.default.string,
  quizEntries: _reactImmutableProptypes2.default.listOf(_reactImmutableProptypes2.default.record).isRequired,
  quizEntry: _reactImmutableProptypes2.default.record.isRequired,
  quizId: _propTypes2.default.string.isRequired,
  removeQuizEntry: _propTypes2.default.func.isRequired, // from connected component
  setUi: _propTypes2.default.func.isRequired,
  shouldClone: _propTypes2.default.bool,
  withConfirm: _propTypes2.default.func.isRequired,
  workingEntry: _reactImmutableProptypes2.default.record.isRequired
}, _class2.defaultProps = {
  disabledForRegrade: false,
  name: null,
  shouldClone: false,
  initialFocusId: null
}, _temp2)) || _class);
exports.default = QuizEntryHeader;