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

import { Fragment, useState, useRef } from "react";
import { jsx, css } from "@emotion/core";
import PropTypes from "prop-types";
import _ from "lodash";
import { generate } from "shortid";
import copy from "copy-to-clipboard";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow from "@material-ui/core/Grow";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import MenuItem from "@material-ui/core/MenuItem";
import MenuList from "@material-ui/core/MenuList";
import { ThemeProvider } from "@material-ui/styles";
import { MaterialTheme } from "../_Themes/index";
import ButtonNew from "../ButtonNew/ButtonNew";
import PullQuote from "../PullQuote/PullQuote";
import Placeholder from "../Placeholder/Placeholder";
import cardMetaTypes from "./cardMetaTypes";
import cardMetaDescription from "./cardMetaDescriptions";
import { Chip } from "../index";
import { Resource, MetadataQuestion, CollapsableSection } from "./LayoutComponents";
var sectionMarginSmall = css(_templateObject());
var sectionMaxWidthSmall = css(_templateObject2());
var sectionMarginMedium = css(_templateObject3());
var sectionMaxWidthMedium = css(_templateObject4());
var authorPhoto = css(_templateObject5());
var cardMetaItem = css(_templateObject6());
var platformItem = css(_templateObject7());
var description = css(_templateObject8());
var headerStyle = css(_templateObject9());
var titleStyle = css(_templateObject10());
var centerSelf = css(_templateObject11());
var buttonImproveContainer = 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 jsx("div", {
    css: description
  }, jsx("b", null, _.get(cardMetaDescription, [id, "title"])), jsx("code", null, " (".concat(id, ") ")), jsx("p", null, _.get(cardMetaDescription, [id, "description"])));
}

Desc.propTypes = {
  id: PropTypes.string
};

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

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

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

  var shareButtonAnchorRef = 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(_.get(window, "location.origin", ""), "/cards/").concat(cardMeta.slug);

    if (option === "link") {
      copy(linkLocation);
    } else {
      copy("".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 jsx("div", null, jsx(ThemeProvider, {
    theme: MaterialTheme
  }, jsx("article", null, jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("header", {
    css: headerStyle
  }, jsx("h1", {
    id: "title",
    css: titleStyle
  }, cardMeta.title), jsx(ButtonGroup, {
    variant: "contained",
    color: "secondary",
    ref: shareButtonAnchorRef,
    "aria-label": "split button",
    css: centerSelf
  }, jsx(Button, {
    onClick: handleShareButtonToggle
  }, shareButtonText), jsx(Button, {
    color: "secondary",
    size: "small",
    "aria-owns": shareButtonOpen ? "menu-list-grow" : undefined,
    "aria-haspopup": "true",
    onClick: handleShareButtonToggle
  }, jsx(ArrowDropDownIcon, null))), jsx(Popper, {
    open: shareButtonOpen,
    anchorEl: shareButtonAnchorRef.current,
    transition: true,
    disablePortal: true,
    placement: "bottom-end"
  }, function (_ref3) {
    var TransitionProps = _ref3.TransitionProps,
        placement = _ref3.placement;
    return jsx(Grow, _extends({}, TransitionProps, {
      style: {
        transformOrigin: placement === "bottom" ? "center top" : "right bottom"
      }
    }), jsx(Paper, {
      id: "menu-list-grow"
    }, jsx(ClickAwayListener, {
      onClickAway: handleShareButtonClose
    }, jsx(MenuList, null, shareButtonOptions.map(function (option) {
      return jsx(MenuItem, {
        key: option.text,
        onClick: function onClick() {
          return handleShareItemClick(option.linkTo);
        }
      }, option.text);
    })))));
  })), jsx(Desc, {
    id: "title"
  }), jsx("hr", null), jsx("section", {
    css: cardMetaItem,
    id: "tags"
  }, cardMeta.tags.map(function (tag, index) {
    return jsx(Chip, {
      tag: tag,
      index: index,
      key: generate()
    });
  })), jsx(Desc, {
    id: "tags"
  }), jsx("hr", null)), jsx("section", null, jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    css: cardMetaItem,
    id: "introText"
  }, cardMeta.introText), jsx(Desc, {
    id: "introText"
  })), jsx("div", {
    id: "visualization",
    css: [sectionMarginMedium, sectionMaxWidthMedium, cardMetaItem]
  }, cardMeta.selector, jsx(cardMeta.visualization, {
    isLoading: isLoading,
    data: data
  })), jsx(Desc, {
    id: "visualization"
  }), jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    css: cardMetaItem,
    id: "shareText"
  }, jsx(PullQuote, {
    quoteText: cardMeta.shareText
  })), jsx(Desc, {
    id: "shareText"
  }), jsx("div", {
    css: cardMetaItem,
    id: "additionalText"
  }, cardMeta.additionalText), jsx(Desc, {
    id: "additionalText"
  }))), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    css: cardMetaItem,
    id: "analysis"
  }, jsx("h2", null, "About this analysis"), cardMeta.analysis)), jsx(Desc, {
    id: "analysis"
  }), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "metadata"
  }, jsx("h2", null, "About this data"), cardMeta.metadata, _.has(cardMeta, "metadataQA") && jsx(CollapsableSection, {
    items: cardMeta.metadataQA.map(function (item) {
      return jsx(MetadataQuestion, {
        item: item,
        key: generate()
      });
    }),
    collapseAfter: 5
  })), jsx(Desc, {
    id: "metadataQA"
  }), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "resources"
  }, jsx("h2", null, "Links and resources"), 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."), jsx(CollapsableSection, {
    items: cardMeta.resources.map(function (item) {
      return jsx(Resource, {
        section: item,
        key: generate()
      });
    }),
    collapseAfter: 7
  })), jsx(Desc, {
    id: "resources"
  }), (cardMeta.authors && cardMeta.authors === "demo" || cardMeta.authors.length > 0) && jsx(Fragment, null, jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall],
    id: "authors"
  }, jsx("h2", null, "Who made this?"), cardMeta.authors === "demo" ? demoAuthorPhotos.map(function (photo) {
    return jsx("img", {
      css: authorPhoto,
      src: photo,
      alt: "Pictures of people who worked on this",
      key: generate()
    });
  }) : cardMeta.authors.map(function (authorEmail) {
    return jsx("p", {
      key: authorEmail
    }, jsx("a", {
      href: "mailto:".concat(authorEmail)
    }, authorEmail));
  })), jsx(Desc, {
    id: "authors"
  })), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "improve"
  }, jsx("h2", null, "Help make this better"), 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."), jsx("div", {
    css: buttonImproveContainer
  }, jsx(ButtonNew, {
    href: "https://civicsoftwarefoundation.org/#volunteers",
    label: "Get Involved!"
  }), jsx(ButtonNew, {
    href: issueLink,
    label: "File an Issue"
  })))), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "explore"
  }, jsx("h2", null, "Explore related data"), jsx(Placeholder, null, jsx("h3", null, jsx("a", {
    href: "https://civicsoftwarefoundation.org/#cities"
  }, "See your data here!"))))));
}

CivicCardLayoutFullWithDescriptions.propTypes = {
  isLoading: PropTypes.bool,
  data: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.array]),
  cardMeta: cardMetaTypes
};
export default CivicCardLayoutFullWithDescriptions;