"use strict";

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

var _react = require("react");

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

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

var _lodash = _interopRequireDefault(require("lodash"));

var _shortid = require("shortid");

var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));

var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));

var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));

var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));

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

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

var _ButtonNew = _interopRequireDefault(require("../ButtonNew/ButtonNew"));

var _PullQuote = _interopRequireDefault(require("../PullQuote/PullQuote"));

var _Placeholder = _interopRequireDefault(require("../Placeholder/Placeholder"));

var _cardMetaTypes = _interopRequireDefault(require("./cardMetaTypes"));

var _cardMetaDescriptions = _interopRequireDefault(require("./cardMetaDescriptions"));

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

var _LayoutComponents = require("./LayoutComponents");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _templateObject12() {
  var data = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-rows: 1fr;\n  grid-template-columns: 200px 200px;\n  justify-content: center;\n  justify-items: center;\n"]);

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

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n  justify-self: center;\n"]);

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

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  margin: 30px 0 20px;\n"]);

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

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  display: grid;\n  padding-bottom: 20px;\n"]);

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

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  max-width: 700px;\n  margin: auto;\n"]);

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

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid blue;\n"]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid red;\n"]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  width: 50%;\n  filter: grayscale(100%);\n  cursor: pointer;\n"]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  max-width: 700px;\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 sectionMarginMedium = (0, _core.css)(_templateObject3());
var sectionMaxWidthMedium = (0, _core.css)(_templateObject4());
var authorPhoto = (0, _core.css)(_templateObject5());
var cardMetaItem = (0, _core.css)(_templateObject6());
var platformItem = (0, _core.css)(_templateObject7());
var description = (0, _core.css)(_templateObject8());
var headerStyle = (0, _core.css)(_templateObject9());
var titleStyle = (0, _core.css)(_templateObject10());
var centerSelf = (0, _core.css)(_templateObject11());
var buttonImproveContainer = (0, _core.css)(_templateObject12());
var demoAuthorPhotos = ["https://civicsoftwarefoundation.org/static/human-grid-test-4c90bfc3f316f5d4e104320cb98c43c8.png", "https://civicsoftwarefoundation.org/static/human-grid-test2-ea1849501456af341647068243fc72bb.png"];

function Desc(_ref) {
  var id = _ref.id;
  return (0, _core.jsx)("div", {
    css: description
  }, (0, _core.jsx)("b", null, _lodash["default"].get(_cardMetaDescriptions["default"], [id, "title"])), (0, _core.jsx)("code", null, " (".concat(id, ") ")), (0, _core.jsx)("p", null, _lodash["default"].get(_cardMetaDescriptions["default"], [id, "description"])));
}

Desc.propTypes = {
  id: _propTypes["default"].string
};

function CivicCardLayoutFullWithDescriptions(_ref2) {
  var isLoading = _ref2.isLoading,
      data = _ref2.data,
      cardMeta = _ref2.cardMeta;

  var _useState = (0, _react.useState)("Share"),
      _useState2 = _slicedToArray(_useState, 2),
      shareButtonText = _useState2[0],
      setShareButtonText = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = _slicedToArray(_useState3, 2),
      shareButtonOpen = _useState4[0],
      setShareButtonOpen = _useState4[1];

  var shareButtonAnchorRef = (0, _react.useRef)(null);
  var issueLink = "https://github.com/hackoregon/civic/issues/new?labels=type%3Astory-card&template=story-card-improve.md&title=[FEEDBACK] ".concat(cardMeta.slug);

  function handleShareItemClick(option) {
    var linkLocation = "".concat(_lodash["default"].get(window, "location.origin", ""), "/cards/").concat(cardMeta.slug);

    if (option === "link") {
      (0, _copyToClipboard["default"])(linkLocation);
    } else {
      (0, _copyToClipboard["default"])("".concat(linkLocation, "/embed"));
    }

    setShareButtonText("Copied!");
    setTimeout(function () {
      setShareButtonText("Share");
    }, 2000);
    setShareButtonOpen(false);
  }

  function handleShareButtonToggle() {
    setShareButtonOpen(function (prevOpen) {
      return !prevOpen;
    });
  }

  function handleShareButtonClose(event) {
    if (shareButtonAnchorRef.current && shareButtonAnchorRef.current.contains(event.target)) {
      return;
    }

    setShareButtonOpen(false);
  }

  var shareButtonOptions = [{
    text: "Link",
    linkTo: "link"
  }, {
    text: "Embed",
    linkTo: "embed"
  }];
  return (0, _core.jsx)("div", null, (0, _core.jsx)(_styles.ThemeProvider, {
    theme: _index.MaterialTheme
  }, (0, _core.jsx)("article", null, (0, _core.jsx)("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("header", {
    css: headerStyle
  }, (0, _core.jsx)("h1", {
    id: "title",
    css: titleStyle
  }, cardMeta.title), (0, _core.jsx)(_ButtonGroup["default"], {
    variant: "contained",
    color: "secondary",
    ref: shareButtonAnchorRef,
    "aria-label": "split button",
    css: centerSelf
  }, (0, _core.jsx)(_Button["default"], {
    onClick: handleShareButtonToggle
  }, shareButtonText), (0, _core.jsx)(_Button["default"], {
    color: "secondary",
    size: "small",
    "aria-owns": shareButtonOpen ? "menu-list-grow" : undefined,
    "aria-haspopup": "true",
    onClick: handleShareButtonToggle
  }, (0, _core.jsx)(_ArrowDropDown["default"], null))), (0, _core.jsx)(_Popper["default"], {
    open: shareButtonOpen,
    anchorEl: shareButtonAnchorRef.current,
    transition: true,
    disablePortal: true,
    placement: "bottom-end"
  }, function (_ref3) {
    var TransitionProps = _ref3.TransitionProps,
        placement = _ref3.placement;
    return (0, _core.jsx)(_Grow["default"], _extends({}, TransitionProps, {
      style: {
        transformOrigin: placement === "bottom" ? "center top" : "right bottom"
      }
    }), (0, _core.jsx)(_Paper["default"], {
      id: "menu-list-grow"
    }, (0, _core.jsx)(_ClickAwayListener["default"], {
      onClickAway: handleShareButtonClose
    }, (0, _core.jsx)(_MenuList["default"], null, shareButtonOptions.map(function (option) {
      return (0, _core.jsx)(_MenuItem["default"], {
        key: option.text,
        onClick: function onClick() {
          return handleShareItemClick(option.linkTo);
        }
      }, option.text);
    })))));
  })), (0, _core.jsx)(Desc, {
    id: "title"
  }), (0, _core.jsx)("hr", null), (0, _core.jsx)("section", {
    css: cardMetaItem,
    id: "tags"
  }, cardMeta.tags.map(function (tag, index) {
    return (0, _core.jsx)(_index2.Chip, {
      tag: tag,
      index: index,
      key: (0, _shortid.generate)()
    });
  })), (0, _core.jsx)(Desc, {
    id: "tags"
  }), (0, _core.jsx)("hr", null)), (0, _core.jsx)("section", null, (0, _core.jsx)("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "introText"
  }, cardMeta.introText), (0, _core.jsx)(Desc, {
    id: "introText"
  })), (0, _core.jsx)("div", {
    id: "visualization",
    css: [sectionMarginMedium, sectionMaxWidthMedium, cardMetaItem]
  }, cardMeta.selector, (0, _core.jsx)(cardMeta.visualization, {
    isLoading: isLoading,
    data: data
  })), (0, _core.jsx)(Desc, {
    id: "visualization"
  }), (0, _core.jsx)("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "shareText"
  }, (0, _core.jsx)(_PullQuote["default"], {
    quoteText: cardMeta.shareText
  })), (0, _core.jsx)(Desc, {
    id: "shareText"
  }), (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "additionalText"
  }, cardMeta.additionalText), (0, _core.jsx)(Desc, {
    id: "additionalText"
  }))), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "analysis"
  }, (0, _core.jsx)("h2", null, "About this analysis"), cardMeta.analysis)), (0, _core.jsx)(Desc, {
    id: "analysis"
  }), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "metadata"
  }, (0, _core.jsx)("h2", null, "About this data"), cardMeta.metadata, _lodash["default"].has(cardMeta, "metadataQA") && (0, _core.jsx)(_LayoutComponents.CollapsableSection, {
    items: cardMeta.metadataQA.map(function (item) {
      return (0, _core.jsx)(_LayoutComponents.MetadataQuestion, {
        item: item,
        key: (0, _shortid.generate)()
      });
    }),
    collapseAfter: 5
  })), (0, _core.jsx)(Desc, {
    id: "metadataQA"
  }), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "resources"
  }, (0, _core.jsx)("h2", null, "Links and resources"), (0, _core.jsx)("p", null, "Interested in learning more? The following links and resources are useful in gaining a greater understanding of the context of this data visualization."), (0, _core.jsx)(_LayoutComponents.CollapsableSection, {
    items: cardMeta.resources.map(function (item) {
      return (0, _core.jsx)(_LayoutComponents.Resource, {
        section: item,
        key: (0, _shortid.generate)()
      });
    }),
    collapseAfter: 7
  })), (0, _core.jsx)(Desc, {
    id: "resources"
  }), (cardMeta.authors && cardMeta.authors === "demo" || cardMeta.authors.length > 0) && (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall],
    id: "authors"
  }, (0, _core.jsx)("h2", null, "Who made this?"), cardMeta.authors === "demo" ? demoAuthorPhotos.map(function (photo) {
    return (0, _core.jsx)("img", {
      css: authorPhoto,
      src: photo,
      alt: "Pictures of people who worked on this",
      key: (0, _shortid.generate)()
    });
  }) : cardMeta.authors.map(function (authorEmail) {
    return (0, _core.jsx)("p", {
      key: authorEmail
    }, (0, _core.jsx)("a", {
      href: "mailto:".concat(authorEmail)
    }, authorEmail));
  })), (0, _core.jsx)(Desc, {
    id: "authors"
  })), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "improve"
  }, (0, _core.jsx)("h2", null, "Help make this better"), (0, _core.jsx)("p", null, "CIVIC is an open platform, so you can help make this better! Whether you noticed a typo, want to suggest an improvement for our data visualization, or have context to add about the dataset, we want you to contribute."), (0, _core.jsx)("div", {
    css: buttonImproveContainer
  }, (0, _core.jsx)(_ButtonNew["default"], {
    href: "https://civicsoftwarefoundation.org/#volunteers",
    label: "Get Involved!"
  }), (0, _core.jsx)(_ButtonNew["default"], {
    href: issueLink,
    label: "File an Issue"
  })))), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "explore"
  }, (0, _core.jsx)("h2", null, "Explore related data"), (0, _core.jsx)(_Placeholder["default"], null, (0, _core.jsx)("h3", null, (0, _core.jsx)("a", {
    href: "https://civicsoftwarefoundation.org/#cities"
  }, "See your data here!"))))));
}

CivicCardLayoutFullWithDescriptions.propTypes = {
  isLoading: _propTypes["default"].bool,
  data: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].array]),
  cardMeta: _cardMetaTypes["default"]
};
var _default = CivicCardLayoutFullWithDescriptions;
exports["default"] = _default;