import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router";
import { get } from "lodash";
import CivicCardLayoutVisualizationOnly from "../CivicCard/CivicCardLayoutVisualizationOnly";
import CivicCardLayoutClassic from "../CivicCard/CivicCardLayoutClassic";
import CivicCardLayoutPreview from "../CivicCard/CivicCardLayoutPreview";
import CivicCardLayoutSideBySide from "../CivicCard/CivicCardLayoutSideBySide";

var CardDetailPageEmbed = function CardDetailPageEmbed(_ref) {
  var params = _ref.params,
      CardRegistry = _ref.CardRegistry;
  var card = CardRegistry.find(params.slug);
  var layouts = {
    visualization: CivicCardLayoutVisualizationOnly,
    classic: CivicCardLayoutClassic,
    preview: CivicCardLayoutPreview,
    comparison: CivicCardLayoutSideBySide
  };
  var Layout = get(layouts, params.layout) || layouts.classic;

  if (card && card.component) {
    var CardComponent = card.component;
    return React.createElement(CardComponent, {
      Layout: Layout
    });
  }

  return React.createElement("div", null, React.createElement("h1", null, "Card not found"), React.createElement("p", null, "The card you are looking for doesn't exist."), React.createElement(Link, {
    to: "/"
  }, "Find more on CIVIC"));
};

CardDetailPageEmbed.propTypes = {
  params: PropTypes.shape({
    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
};
CardDetailPageEmbed.displayName = "CardDetailPageEmbed";
export default CardDetailPageEmbed;