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) } })); }

import { jsx, css } from "@emotion/core";
import PropTypes from "prop-types";
import shortid from "shortid";
import { ThemeProvider } from "@material-ui/styles";
import { MaterialTheme } from "../_Themes/index";
import { CivicCardLayoutPreviewTitleOnly, Placeholder } from "../index";
var sectionMarginSmall = css(_templateObject());
var sectionMaxWidthSmall = css(_templateObject2());
var listContainerStyle = css(_templateObject3());
var listItemStyle = 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 jsx("li", {
      key: shortid.generate(),
      css: listItemStyle
    }, jsx(relatedCard.component, {
      Layout: CivicCardLayoutPreviewTitleOnly
    }));
  }) : jsx(Placeholder, null, jsx("h3", null, jsx("a", {
    href: "https://civicsoftwarefoundation.org/#cities"
  }, "See your data here!")));

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

  return null;
};

ExploreRelated.propTypes = {
  slug: PropTypes.string.isRequired,
  CardRegistry: PropTypes.shape({
    entries: PropTypes.arrayOf(PropTypes.shape({
      component: PropTypes.func.isRequired,
      project: PropTypes.string.isRequired,
      slug: PropTypes.string.isRequired
    }))
  }).isRequired,
  numOfRelatedCards: PropTypes.number
};
ExploreRelated.displayName = "ExploreRelated";
export default ExploreRelated;