"use strict";

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

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

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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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

var _contentRendering = require("../../rce/contentRendering");

var _dragHtml = _interopRequireDefault(require("../dragHtml"));

var _formatMessage = _interopRequireDefault(require("../../format-message"));

var _LoadMore = _interopRequireDefault(require("../../common/components/LoadMore"));

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

var _aphrodite = require("aphrodite");

/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */
var nextId = 1;

var LinkSet =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(LinkSet, _Component);

  function LinkSet(props) {
    var _this;

    (0, _classCallCheck2.default)(this, LinkSet);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(LinkSet).call(this, props));

    _this.handleLinkClick = function (e, link) {
      if (_this.props.onLinkClick) {
        e.preventDefault();

        _this.props.onLinkClick(link);
      }
    };

    _this.handleDragStart = function (ev, link) {
      (0, _dragHtml.default)(ev, (0, _contentRendering.renderLink)(link));
    };

    _this.handleLoadMoreClick = function (e) {
      e.preventDefault();

      if (_this.props.fetchNextPage) {
        _this.props.fetchNextPage();
      }
    };

    _this.describedByID = "rce-LinkSet-describedBy-".concat(nextId++);
    return _this;
  }

  (0, _createClass2.default)(LinkSet, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      if (this.props.fetchInitialPage) {
        this.props.fetchInitialPage();
      }
    }
  }, {
    key: "hasLinks",
    value: function hasLinks() {
      return this.props.collection.links.length > 0;
    }
  }, {
    key: "isEmpty",
    value: function isEmpty() {
      return !this.hasLinks() && !this.props.collection.hasMore && !this.props.collection.isLoading;
    }
  }, {
    key: "renderLink",
    value: function renderLink(link) {
      var _this2 = this;

      return _react.default.createElement("li", {
        key: link.href,
        title: "\u041D\u0430\u0436\u043C\u0438\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443 \u043D\u0430 \u044D\u0442\u043E\u0442 \u044D\u043B\u0435\u043C\u0435\u043D\u0442.",
        className: (0, _aphrodite.css)(styles.item)
      }, _react.default.createElement("a", {
        href: link.href,
        className: (0, _aphrodite.css)(styles.link),
        role: "button",
        "aria-describedby": this.describedByID,
        onClick: function onClick(e) {
          return _this2.handleLinkClick(e, link);
        },
        onDragStart: function onDragStart(e) {
          return _this2.handleDragStart(e, link);
        }
      }, link.title));
    }
  }, {
    key: "renderLinks",
    value: function renderLinks() {
      return _react.default.createElement("div", null, _react.default.createElement(_ScreenReaderContent.default, {
        id: this.describedByID
      }, "\u041D\u0430\u0436\u043C\u0438\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443 \u0432 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440."), _react.default.createElement("ul", {
        className: (0, _aphrodite.css)(styles.list)
      }, this.props.collection.links.map(this.renderLink, this)));
    }
  }, {
    key: "renderEmptyIndicator",
    value: function renderEmptyIndicator() {
      return _react.default.createElement("span", {
        className: "rcs-LinkSet-Empty"
      }, "\u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432.");
    }
  }, {
    key: "renderLoadingError",
    value: function renderLoadingError() {
      if (this.props.collection.lastError) {
        return _react.default.createElement("span", {
          className: "rcs-LinkSet-LoadFailed",
          role: "alert"
        }, "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043B\u0430\u0441\u044C \u0431\u0435\u0437\u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043D\u043E...");
      }

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      if (this.props.fetchNextPage) {
        var hasMore = this.props.collection.hasMore || false;
        var isLoading = this.props.collection.isLoading || false;
        return _react.default.createElement("div", null, _react.default.createElement(_LoadMore.default, {
          hasMore: hasMore,
          isLoading: isLoading,
          loadMore: this.props.fetchNextPage,
          focusSelector: "li>a"
        }, this.hasLinks() && this.renderLinks(), this.renderLoadingError()), this.isEmpty() && !(this.props.suppressRenderEmpty || false) && this.renderEmptyIndicator());
      } else {
        return _react.default.createElement("div", null, this.hasLinks() ? this.renderLinks() : this.renderEmptyIndicator());
      }
    }
  }]);
  LinkSet.displayName = "LinkSet";
  return LinkSet;
}(_react.Component);

LinkSet.propTypes = {
  collection: _propTypes.default.shape({
    links: _propTypes.default.array.isRequired,
    isLoading: _propTypes.default.bool,
    hasMore: _propTypes.default.bool,
    lastError: _propTypes.default.object
  }).isRequired,
  fetchInitialPage: _propTypes.default.func,
  fetchNextPage: _propTypes.default.func,
  onLinkClick: _propTypes.default.func,
  suppressRenderEmpty: _propTypes.default.bool
};

var styles = _aphrodite.StyleSheet.create({
  list: {
    margin: 0,
    padding: 0,
    listStyle: "none"
  },
  item: {
    margin: 0,
    padding: 0,
    display: "block",
    backgroundPosition: "left center",
    backgroundRepeat: "no-repeat",
    width: "100%",
    ":hover": {
      backgroundColor: "#eee"
    }
  },
  link: {
    display: "block",
    padding: "3px 5px",
    textAlign: "left"
  }
});

var _default = LinkSet;
exports.default = _default;