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

var _partial2 = _interopRequireDefault(_partial);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _react3 = require('format-message/react');

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

var _IconEditLine = require('instructure-icons/lib/Line/IconEditLine');

var _IconEditLine2 = _interopRequireDefault(_IconEditLine);

var _IconPlusLine = require('instructure-icons/lib/Line/IconPlusLine');

var _IconPlusLine2 = _interopRequireDefault(_IconPlusLine);

var _IconCopyLine = require('instructure-icons/lib/Line/IconCopyLine');

var _IconCopyLine2 = _interopRequireDefault(_IconCopyLine);

var _IconTrashLine = require('instructure-icons/lib/Line/IconTrashLine');

var _IconTrashLine2 = _interopRequireDefault(_IconTrashLine);

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 _PresentationContent = require('@instructure/ui-a11y/lib/components/PresentationContent');

var _PresentationContent2 = _interopRequireDefault(_PresentationContent);

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

var _Alert2 = _interopRequireDefault(_Alert);

var _List = require('@instructure/ui-elements/lib/components/List');

var _List2 = _interopRequireDefault(_List);

var _Tag = require('@instructure/ui-elements/lib/components/Tag');

var _Tag2 = _interopRequireDefault(_Tag);

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

var _Text2 = _interopRequireDefault(_Text);

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 _extractTextFromHtml = require('quiz-interactions/lib/util/extractTextFromHtml');

var _extractTextFromHtml2 = _interopRequireDefault(_extractTextFromHtml);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _CopyMoveBankEntryModal = require('../CopyMoveBankEntryModal');

var _CopyMoveBankEntryModal2 = _interopRequireDefault(_CopyMoveBankEntryModal);

var _ExpandButton = require('../../../common/components/shared/ExpandButton');

var _ExpandButton2 = _interopRequireDefault(_ExpandButton);

var _QuizEntry = require('../../../common/records/QuizEntry');

var _QuizEntry2 = _interopRequireDefault(_QuizEntry);

var _Overlay = require('../../../common/components/shared/overlay/Overlay');

var _Overlay2 = _interopRequireDefault(_Overlay);

var _ItemShow = require('../../../common/components/resources/item/ItemShow');

var _ItemShow2 = _interopRequireDefault(_ItemShow);

var _StimulusShowInfo = require('../../../common/components/resources/stimulus/StimulusShowInfo');

var _StimulusShowInfo2 = _interopRequireDefault(_StimulusShowInfo);

var _constants = require('../../../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.BankEntryRow__styles__entryDetail {\n  padding: ' + theme.entryDetailPadding + ';\n}\n\n.BankEntryRow__styles__headerRow {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  color: ' + theme.headerRowColor + ';\n}\n\n.BankEntryRow__styles__buttons {\n  position: relative;\n  display: inline-flex;\n  z-index: ' + theme.buttonsZIndex + ';\n}\n\n.BankEntryRow__styles__expandButtonContainer {\n  border-left: ' + theme.expandButtonContainerBorderWidth + ' solid ' + theme.expandButtonContainerBorderColor + ';\n}\n\n.BankEntryRow__styles__deleteAlert {\n  display: block;\n}\n\n.BankEntryRow__styles__deletePreface {\n  margin-bottom: ' + theme.deletePrefaceMargin + ';\n}\n\n.BankEntryRow__styles__addButton {\n  margin-bottom: ' + theme.addButtonMargin + ';\n}\n\n.BankEntryRow__styles__headerText {\n  color: ' + theme.headerTextColor + ';\n  font-size: ' + theme.headerTextFontSize + ';\n}\n\n.BankEntryRow__styles__stem {\n  overflow-x: auto;\n  font-size: ' + theme.stemFontSize + ';\n  line-height: ' + theme.stemLineHeight + ';\n}\n\n.BankEntryRow__styles__stem p {\n    margin: 0;\n  }\n\n.BankEntryRow__styles__footer {\n  padding: ' + theme.footerPadding + ';\n  border-top: ' + theme.footerBorderWidth + ' solid ' + theme.footerBorderColor + ';\n  font-size: ' + theme.footerFontSize + ';\n}\n\n.BankEntryRow__styles__tags {\n  float: right;\n}\n\n[dir="ltr"] .BankEntryRow__styles__tags {\n  float: right;\n}\n\n[dir="rtl"] .BankEntryRow__styles__tags {\n  float: right;\n}\n';
  },
  'entryDetail': 'BankEntryRow__styles__entryDetail',
  'headerRow': 'BankEntryRow__styles__headerRow',
  'buttons': 'BankEntryRow__styles__buttons',
  'expandButtonContainer': 'BankEntryRow__styles__expandButtonContainer',
  'deleteAlert': 'BankEntryRow__styles__deleteAlert',
  'deletePreface': 'BankEntryRow__styles__deletePreface',
  'addButton': 'BankEntryRow__styles__addButton',
  'headerText': 'BankEntryRow__styles__headerText',
  'stem': 'BankEntryRow__styles__stem',
  'footer': 'BankEntryRow__styles__footer',
  'tags': 'BankEntryRow__styles__tags'
};
var BankEntryRow = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(BankEntryRow, _Component);

  function BankEntryRow() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = BankEntryRow.__proto__ || Object.getPrototypeOf(BankEntryRow)).call.apply(_ref, [this].concat(args))), _this), _this.incrementPosition = function () {
      _this.props.setUi(_constants.BUILD_TRAY_POSITION, _this.props.position + 1);
    }, _this.deleteBankEntry = function () {
      var confirmBody = _react2.default.createElement(
        _Alert2.default,
        { variant: 'error', padding: '0' },
        _react2.default.createElement(
          'div',
          { className: styles.deleteAlert },
          _react2.default.createElement(
            'div',
            { className: styles.deletePreface },
            'Radera det h\xE4r objektet:'
          ),
          _react2.default.createElement(
            _List2.default,
            null,
            _react2.default.createElement(
              _List.ListItem,
              null,
              (0, _react3.formatChildren)('kommer <0>INTE</0> ta bort det fr\xE5n n\xE5gra bed\xF6mningar.', [_react2.default.createElement(_Text2.default, { weight: 'bold', key: '0' })])
            ),
            _react2.default.createElement(
              _List.ListItem,
              null,
              'kommer att f\xF6rlora sin statistiska l\xE4nk i rapporteringen'
            ),
            _react2.default.createElement(
              _List.ListItem,
              null,
              'tar bort \xE5tkomst f\xF6r alla anv\xE4ndare som den h\xE4r banken har delats med'
            )
          )
        )
      );

      _this.props.withConfirm((0, _partial2.default)(_this.props.removeBankEntry, _this.props.bankId, _this.props.bankEntry.id), {
        title: 'Ta bort f\xF6rem\xE5l',
        text: confirmBody,
        continueText: 'Radera',
        continueVariant: 'danger',
        size: 'medium'
      });
    }, _this.addToQuiz = function () {
      if (_this.props.activeQuizId) {
        var newEntry = _QuizEntry2.default.create({
          entryId: _this.props.bankEntry.id,
          entryType: 'BankEntry',
          position: _this.props.position,
          stimulusQuizEntryId: _this.props.stimulusId
        });
        _this.props.addEntryToQuiz(_this.props.activeQuizId, newEntry.entryId, newEntry.entryType, newEntry.getProperties(), false).then(function () {
          _this.props.screenreaderNotification('Bankinmatning har lagts till quizen');
        });
        if (_this.props.position) _this.incrementPosition();
      }
    }, _this.openCopyMoveBankEntryModal = function () {
      _this.props.openModal([_constants.COPY_MOVE_BANK_ENTRY_MODAL, _this.props.bankEntry.entryType, _this.props.bankEntry.entry.toJS().id].join(':'), { modalTrigger: _this.copyMoveBankEntryButton });
    }, _this.createEntryForBank = function () {
      var createEntry = _this.isItemEntry() ? _this.props.createItem : _this.props.createStimulus;
      return createEntry(_this.getEntry(), _this.props.bankId, 'bank');
    }, _this.storeCopyMoveBankEntryButtonRef = function (c) {
      _this.copyMoveBankEntryButton = c;
    }, _this.storeEditButtonRef = function (c) {
      _this.editButton = c;
    }, _this.renderTrashButton = function () {
      var title = 'Radera ' + _this.type();
      return _react2.default.createElement(
        _Button2.default,
        {
          variant: 'icon',
          size: 'medium',
          onClick: _this.deleteBankEntry,
          'data-automation': 'sdk-delete-bank-entry-button',
          icon: _IconTrashLine2.default,
          title: title
        },
        _react2.default.createElement(
          _ScreenReaderContent2.default,
          null,
          title
        )
      );
    }, _this.navigateToBankEntry = function () {
      _this.props.setUi(_constants.SET_EDIT_BUTTON_FOCUS, _this.props.bankEntry.id);
      _this.props.navigateToBankEntry(_this.props.bankEntry.id, _this.props.bankId);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(BankEntryRow, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.props.bankEntry.id === this.props.setEditButtonFocus) {
        this.editButton.focus();
        this.props.clearUi(_constants.SET_EDIT_BUTTON_FOCUS);
      }
      if (this.props.useBankTags) {
        if (this.props.bankEntry.isStimulus) {
          this.props.getStimulusTagAssociations(this.props.bankEntry.entry.get('id'));
        } else {
          this.props.getItemTagAssociations(this.props.bankEntry.entry.get('id'));
        }
      }
    }
  }, {
    key: 'getEntry',
    value: function getEntry() {
      return this.props.bankEntry.getEntry();
    }
  }, {
    key: 'isItemEntry',
    value: function isItemEntry() {
      return this.props.bankEntry.entryType === 'Item';
    }
  }, {
    key: 'type',
    value: function type() {
      return this.isItemEntry() ? 'F\xF6rem\xE5l' : 'Stimulans';
    }
  }, {
    key: 'entryIdentifier',
    value: function entryIdentifier() {
      return this.isItemEntry() ? 'F\xF6rem\xE5l ' + (0, _extractTextFromHtml2.default)(this.getEntry().title) : 'Stimulans ' + this.getEntry().title;
    }
  }, {
    key: 'moveModalTitle',
    value: function moveModalTitle() {
      return 'Kopiera / Flytta ' + this.type();
    }
  }, {
    key: 'renderExpandButton',
    value: function renderExpandButton() {
      var type = this.type();
      var title = this.props.isExpanded ? 'Bryt samman ' + type + ' detaljer' : 'Expandera ' + type + ' detaljer';
      return _react2.default.createElement(
        'div',
        { className: styles.expandButtonContainer },
        _react2.default.createElement(_ExpandButton2.default, {
          onClick: this.props.toggleExpanded,
          title: title,
          isExpanded: this.props.isExpanded
        })
      );
    }
  }, {
    key: 'renderAddButton',
    value: function renderAddButton() {
      if (this.props.addEntryToQuiz) {
        var title = 'L\xE4gg till ' + this.type() + ' f\xF6r detta quiz';
        return _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(styles.buttons, styles.addButton) },
          _react2.default.createElement(
            _Button2.default,
            {
              variant: 'circle-primary',
              size: 'small',
              onClick: this.addToQuiz,
              'data-automation': 'sdk-add-bank-entry-button',
              disabled: this.props.bankEntry.isStimulus && this.props.stimulusId !== null,
              icon: _IconPlusLine2.default,
              title: title
            },
            _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              title
            )
          )
        );
      }
      // This empty div is necessary for spacing
      return _react2.default.createElement('div', null);
    }
  }, {
    key: 'renderMoveButton',
    value: function renderMoveButton() {
      var title = this.moveModalTitle();
      return _react2.default.createElement(
        _Button2.default,
        {
          ref: this.storeCopyMoveBankEntryButtonRef,
          variant: 'icon',
          size: 'medium',
          onClick: this.openCopyMoveBankEntryModal,
          'data-automation': 'sdk-copy-move-bank-entry-button',
          icon: _IconCopyLine2.default,
          title: title
        },
        _react2.default.createElement(
          _ScreenReaderContent2.default,
          null,
          title
        )
      );
    }
  }, {
    key: 'entryHeader',
    value: function entryHeader() {
      return this.isItemEntry() ? this.getEntry().getInteractionType().name : 'Stimulans';
    }
  }, {
    key: 'renderHeader',
    value: function renderHeader() {
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          { className: styles.headerRow },
          this.renderAddButton(),
          _react2.default.createElement(
            'div',
            { className: styles.buttons },
            this.renderEditButton(),
            this.renderMoveButton(),
            this.renderTrashButton(),
            this.renderExpandButton()
          )
        ),
        _react2.default.createElement(
          'div',
          { className: styles.headerText },
          _react2.default.createElement(
            _Heading2.default,
            { level: 'reset', as: 'h2' },
            this.entryHeader(),
            _react2.default.createElement(
              _PresentationContent2.default,
              null,
              ' | '
            ),
            this.entryIdentifier()
          )
        )
      );
    }
  }, {
    key: 'renderEntryCollapsed',
    value: function renderEntryCollapsed() {
      var itemOrStimulus = this.getEntry();

      // render item's body as html
      // or title plain text
      if (itemOrStimulus.itemBody) {
        return _react2.default.createElement(_RichContentRenderer2.default, { customStyles: styles.stem, content: itemOrStimulus.itemBody });
      } else {
        return _react2.default.createElement(
          'div',
          { className: styles.stem },
          itemOrStimulus.title
        );
      }
    }
  }, {
    key: 'renderEntryExpanded',
    value: function renderEntryExpanded() {
      var entry = this.getEntry();
      if (this.isItemEntry()) {
        return _react2.default.createElement(_ItemShow2.default, { entry: entry, guid: this.props.bankEntry.id });
      } else {
        return _react2.default.createElement(_StimulusShowInfo2.default, { stimulus: entry });
      }
    }
  }, {
    key: 'renderEditButton',
    value: function renderEditButton() {
      var title = '\xC4ndra ' + this.type();
      return _react2.default.createElement(
        _Button2.default,
        {
          ref: this.storeEditButtonRef,
          variant: 'icon',
          size: 'medium',
          onClick: this.navigateToBankEntry,
          'data-automation': 'sdk-edit-bank-entry-button',
          icon: _IconEditLine2.default,
          title: title
        },
        _react2.default.createElement(
          _ScreenReaderContent2.default,
          null,
          title
        )
      );
    }
  }, {
    key: 'renderTags',
    value: function renderTags() {
      if (!this.props.useBankTags) {
        return null;
      }

      var display = 2;
      var count = this.props.tagAssociations.size;
      var extra = count - display;
      var visible = this.props.tagAssociations.take(display).map(function (t) {
        return _react2.default.createElement(_Tag2.default, {
          margin: '0 xx-small 0 0',
          key: t.get('id'),
          text: t.get('tag_value')
        });
      });

      return _react2.default.createElement(
        'span',
        { className: styles.tags },
        visible,
        extra > 0 && _react2.default.createElement(_Tag2.default, {
          theme: { defaultBackground: '#FFFFFF' },
          text: '+' + extra })
      );
    }
  }, {
    key: 'renderFooter',
    value: function renderFooter() {
      var lastUpdate = (0, _react3.formatChildren)('<0>Senast uppdaterad</0> ' + _formatMessage2.default.date(new Date(this.props.bankEntry.get('updatedAt')), 'datetime_medium', 'sv-x-k12'), [_react2.default.createElement(_Text2.default, { key: 'lastUpdate', weight: 'bold' })]);

      return _react2.default.createElement(
        'div',
        { className: styles.footer },
        _react2.default.createElement(
          'span',
          null,
          lastUpdate
        ),
        this.renderTags()
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var isExpanded = this.props.isExpanded;

      return _react2.default.createElement(
        _Overlay2.default,
        { onClick: this.props.toggleExpanded, tabIndex: '-1' },
        _react2.default.createElement(
          'div',
          { role: 'group', 'aria-label': this.entryIdentifier() },
          _react2.default.createElement(
            'div',
            { className: styles.entryDetail, 'data-automation': 'sdk-bankEntryItem' },
            this.renderHeader(),
            isExpanded ? this.renderEntryExpanded() : this.renderEntryCollapsed()
          ),
          isExpanded && this.renderFooter()
        ),
        _react2.default.createElement(_CopyMoveBankEntryModal2.default, {
          createEntry: this.createEntryForBank,
          label: this.moveModalTitle(),
          sourceBankId: this.props.bankId,
          sourceBankEntryId: this.props.bankEntry.id,
          entryId: this.props.bankEntry.entry.get('id'),
          entryType: this.props.bankEntry.entryType
        })
      );
    }
  }]);
  BankEntryRow.displayName = 'BankEntryRow'
  ;
  return BankEntryRow;
}(_react.Component), _class2.propTypes = {
  activeQuizId: _propTypes2.default.string,
  addEntryToQuiz: _propTypes2.default.func,
  bankEntry: _reactImmutableProptypes2.default.record.isRequired,
  bankId: _propTypes2.default.string.isRequired,
  clearUi: _propTypes2.default.func.isRequired,
  createItem: _propTypes2.default.func.isRequired,
  createStimulus: _propTypes2.default.func.isRequired,
  getItemTagAssociations: _propTypes2.default.func.isRequired,
  getStimulusTagAssociations: _propTypes2.default.func.isRequired,
  isExpanded: _propTypes2.default.bool,
  navigateToBankEntry: _propTypes2.default.func.isRequired,
  openModal: _propTypes2.default.func.isRequired,
  position: _propTypes2.default.number,
  removeBankEntry: _propTypes2.default.func.isRequired,
  screenreaderNotification: _propTypes2.default.func.isRequired,
  setEditButtonFocus: _propTypes2.default.bool,
  setUi: _propTypes2.default.func.isRequired,
  stimulusId: _propTypes2.default.number,
  tagAssociations: _reactImmutableProptypes2.default.listOf(_reactImmutableProptypes2.default.map),
  useBankTags: _propTypes2.default.bool.isRequired,
  toggleExpanded: _propTypes2.default.func.isRequired,
  withConfirm: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  activeQuizId: null,
  addEntryToQuiz: null,
  stimulusId: null,
  isExpanded: false,
  position: 0,
  setEditButtonFocus: false,
  tagAssociations: _immutable2.default.List()
}, _temp2)) || _class);
exports.default = BankEntryRow;