"use strict";

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

var _core = require("@emotion/core");

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

var _shortid = _interopRequireDefault(require("shortid"));

var _styles = require("@material-ui/styles");

var _index = require("../_Themes/index");

var _index2 = require("../index");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  width: 45%;\n  margin: 5px;\n  box-sizing: border-box;\n  list-style-type: none;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  padding: 0;\n  justify-content: space-evenly;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  max-width: 900px;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: block;\n  margin: 12px auto;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var sectionMarginSmall = (0, _core.css)(_templateObject());
var sectionMaxWidthSmall = (0, _core.css)(_templateObject2());
var listContainerStyle = (0, _core.css)(_templateObject3());
var listItemStyle = (0, _core.css)(_templateObject4());

var matchRelatedCardsByTags = function matchRelatedCardsByTags(slug, baseTags, entries, numOfRelatedCards) {
  var relatedCards = baseTags && baseTags.length ? entries.map(function (entry) {
    return _objectSpread({
      numOfSimilarTags: entry.component.tags ? entry.component.tags.filter(function (tag) {
        return baseTags.includes(tag);
      }).length : 0
    }, entry);
  }).filter(function (entry) {
    return entry.slug !== slug;
  }).sort(function (a, b) {
    return b.numOfSimilarTags - a.numOfSimilarTags;
  }).slice(0, numOfRelatedCards) : [];
  return relatedCards;
};

var ExploreRelated = function ExploreRelated(_ref) {
  var slug = _ref.slug,
      CardRegistry = _ref.CardRegistry,
      _ref$numOfRelatedCard = _ref.numOfRelatedCards,
      numOfRelatedCards = _ref$numOfRelatedCard === void 0 ? 4 : _ref$numOfRelatedCard;
  var card = CardRegistry.find(slug);
  var relatedCards = matchRelatedCardsByTags(slug, card.component.tags, CardRegistry.entries, numOfRelatedCards);
  var relatedCardList = relatedCards.length > 0 ? relatedCards.map(function (relatedCard) {
    return (0, _core.jsx)("li", {
      key: _shortid["default"].generate(),
      css: listItemStyle
    }, (0, _core.jsx)(relatedCard.component, {
      Layout: _index2.CivicCardLayoutPreviewTitleOnly
    }));
  }) : (0, _core.jsx)(_index2.Placeholder, null, (0, _core.jsx)("h3", null, (0, _core.jsx)("a", {
    href: "https://civicsoftwarefoundation.org/#cities"
  }, "See your data here!")));

  if (card && card.component) {
    return (0, _core.jsx)(_styles.ThemeProvider, {
      theme: _index.MaterialTheme
    }, (0, _core.jsx)("section", {
      css: [sectionMarginSmall, sectionMaxWidthSmall]
    }, (0, _core.jsx)("h2", null, "Explore related data"), (0, _core.jsx)("ul", {
      css: listContainerStyle
    }, relatedCardList)));
  }

  return null;
};

ExploreRelated.propTypes = {
  slug: _propTypes["default"].string.isRequired,
  CardRegistry: _propTypes["default"].shape({
    entries: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      component: _propTypes["default"].func.isRequired,
      project: _propTypes["default"].string.isRequired,
      slug: _propTypes["default"].string.isRequired
    }))
  }).isRequired,
  numOfRelatedCards: _propTypes["default"].number
};
ExploreRelated.displayName = "ExploreRelated";
var _default = ExploreRelated;
exports["default"] = _default;