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 _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 _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  padding-left: 1rem;\n  padding-right: 1rem;\n"]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  padding-top: 1rem;\n  margin-bottom: 0;\n  padding-left: 1rem;\n  font-size: 1.5rem;\n"]);

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

  return data;
}

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 _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: grid;\n  justify-content: center;\n  font-size: 1.2rem;\n\n  > p {\n    > a {\n      color: ", ";\n    }\n  }\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 { css, jsx } from "@emotion/core";
import { useState, Fragment } from "react";
import PropTypes from "prop-types";
import shortid from "shortid";
import { Link } from "react-router";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Collapse from "@material-ui/core/Collapse";
import ExpandMore from "@material-ui/icons/ExpandMore";
import ChevronRight from "@material-ui/icons/ChevronRight";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import CssBaseline from "@material-ui/core/CssBaseline";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import Header from "../Header/Header";
import BrandColors from "../_Themes/Brand/BrandColors";
import ProjectCard from "./ProjectCard";
import { Checkbox, CivicCardLayoutPreview, MaterialTheme, Button } from "../index";
var emptyState = css(_templateObject(), BrandColors.action.hex);
var drawerWidth = 240;
var headerHeight = 72;
var drawerGap = 0;
var useStyles = makeStyles(function (theme) {
  return {
    root: {
      display: "flex",
      flexDirection: "column",
      width: "95vw",
      margin: "0px"
    },
    drawer: _defineProperty({}, theme.breakpoints.up("sm"), {
      zIndex: "998",
      width: drawerWidth,
      flexShrink: 0
    }),
    filtersButton: _defineProperty({}, theme.breakpoints.up("sm"), {
      display: "none"
    }),
    toolbar: {
      width: "calc(100% - 10px)",
      marginLeft: "10px"
    },
    drawerPaper: _defineProperty({
      width: drawerWidth
    }, theme.breakpoints.up("sm"), {
      top: "calc(".concat(headerHeight, "px - 30px + ").concat(drawerGap, "px)"),
      height: "calc(100vh - ".concat(headerHeight, "px + 30px - ").concat(drawerGap, "px)")
    }),
    filtersList: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "flex-start",
      alignSelf: "center",
      margin: "0px",
      width: "100%"
    },
    categoryListText: _defineProperty({}, theme.breakpoints.up("sm"), {
      flexGrow: 0
    }),
    content: _defineProperty({
      position: "absolute",
      top: headerHeight,
      padding: theme.spacing(1),
      width: "100%"
    }, theme.breakpoints.up("sm"), {
      left: drawerWidth,
      width: "calc(100% - ".concat(drawerWidth, "px)"),
      alignSelf: "flex-end"
    }),
    filterItem: {
      listStyleType: "none"
    },
    entriesList: {
      padding: "0px",
      display: "flex",
      flexWrap: "wrap"
    },
    entry: _defineProperty({
      margin: "10px",
      flexWrap: "wrap",
      listStyleType: "none",
      alignSelf: "stretch",
      width: "90%"
    }, theme.breakpoints.up("lg"), {
      width: "45%"
    }),
    nested: {
      paddingLeft: theme.spacing(4)
    },
    storyCard: {
      height: "1000px"
    }
  };
});
var filterPadding = css(_templateObject2());
var headingPadding = css(_templateObject3());

var CardList = function CardList(_ref) {
  var CardRegistry = _ref.CardRegistry,
      tagsList = _ref.tagsList,
      projects = _ref.projects;
  var entries = CardRegistry.entries,
      tags = CardRegistry.tags;
  console.log("Tag Count:", tags);
  var allTagsFalse = {};
  Object.keys(tagsList).forEach(function (category) {
    tagsList[category].forEach(function (tag) {
      allTagsFalse[tag] = false;
    });
  });
  var classes = useStyles();

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      showAllStories = _useState2[0],
      setShowAllStories = _useState2[1];

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

  var _useState5 = useState(true),
      _useState6 = _slicedToArray(_useState5, 2),
      openTopic = _useState6[0],
      setOpenTopic = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      openLocation = _useState8[0],
      setOpenLocation = _useState8[1];

  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      openVisualization = _useState10[0],
      setOpenVisualization = _useState10[1];

  var theme = useTheme();

  var _useState11 = useState(allTagsFalse),
      _useState12 = _slicedToArray(_useState11, 2),
      activeTags = _useState12[0],
      setActiveTags = _useState12[1];

  var noFiltersSelected = function noFiltersSelected() {
    var tagNames = Object.keys(activeTags);

    for (var i = 0; i < tagNames.length; i += 1) {
      if (activeTags[tagNames[i]]) return false;
    }

    return true;
  };

  var categoryOpeners = {
    topics: openTopic,
    locations: openLocation,
    visualizations: openVisualization
  };
  var categoryHandlers = {
    topicsHandler: function topicsHandler() {
      setOpenTopic(!openTopic);
    },
    locationsHandler: function locationsHandler() {
      setOpenLocation(!openLocation);
    },
    visualizationsHandler: function visualizationsHandler() {
      setOpenVisualization(!openVisualization);
    }
  };

  var handleDrawerToggle = function handleDrawerToggle() {
    setMobileOpen(!mobileOpen);
  };

  var drawer = jsx("div", {
    className: classes.toolbar
  }, jsx("h1", {
    css: filterPadding
  }, "Filters"), jsx(List, {
    component: "aside",
    "aria-labelledby": "nested-list-subheader",
    className: classes.filtersList
  }, Object.keys(tagsList).map(function (category) {
    return jsx(Fragment, null, jsx(ListItem, {
      button: true,
      onClick: categoryHandlers["".concat(category, "Handler")]
    }, jsx(ListItemText, {
      className: classes.categoryListText,
      primary: category.replace(/^\w/, function (c) {
        return c.toUpperCase();
      })
    }), categoryOpeners[category] ? jsx(ExpandMore, null) : jsx(ChevronRight, null)), jsx(Collapse, {
      "in": categoryOpeners[category],
      timeout: "auto",
      unmountOnExit: true
    }, jsx(List, {
      component: "ul",
      disablePadding: true
    }, tagsList[category].sort().map(function (topic) {
      return jsx(ListItem, {
        key: shortid.generate(),
        className: classes.nested
      }, jsx(Checkbox, {
        value: activeTags[topic],
        label: topic,
        onChange: function onChange() {
          if (showAllStories) setShowAllStories(false);
          setActiveTags(_objectSpread({}, activeTags, _defineProperty({}, topic, !activeTags[topic])));
        }
      }));
    }))));
  })));

  var filterCardsBasedOnActiveTags = function filterCardsBasedOnActiveTags(entryTags) {
    if (!entryTags) return false;
    if (showAllStories) return true;
    if (noFiltersSelected()) return true;

    for (var i = 0; i < entryTags.length; i += 1) {
      if (activeTags[entryTags[i]]) return true;
    }

    return false;
  };

  var filteredEntries = entries.filter(function (entry) {
    return filterCardsBasedOnActiveTags(entry.component.tags);
  });
  return jsx(Fragment, null, jsx(Header, null), jsx(ThemeProvider, {
    theme: MaterialTheme
  }, jsx("div", {
    className: classes.root
  }, jsx(CssBaseline, null), jsx("nav", {
    className: classes.drawer,
    "aria-label": "mailbox folders"
  }, jsx(Hidden, {
    smUp: true,
    implementation: "css"
  }, jsx(Drawer, {
    variant: "temporary",
    anchor: theme.direction === "rtl" ? "right" : "left",
    open: mobileOpen,
    onClose: handleDrawerToggle,
    classes: {
      paper: classes.drawerPaper
    },
    ModalProps: {
      keepMounted: true
    }
  }, drawer)), jsx(Hidden, {
    xsDown: true,
    implementation: "css"
  }, jsx(Drawer, {
    classes: {
      paper: classes.drawerPaper
    },
    variant: "permanent",
    open: true
  }, drawer))), jsx("main", {
    className: classes.content
  }, jsx("section", {
    className: classes.filtersButton
  }, jsx(Button, {
    "aria-label": "open filters list",
    onClick: handleDrawerToggle
  }, "Filters")), noFiltersSelected() && jsx("section", null, jsx("h2", {
    css: headingPadding
  }, jsx("strong", null, "Featured Projects: Hack Oregon Demo Day")), jsx("ul", {
    className: classes.entriesList
  }, projects.map(function (entry) {
    return jsx("li", {
      key: shortid.generate(),
      className: classes.entry
    }, jsx(ProjectCard, {
      title: entry.title,
      description: entry.description,
      link: entry.link,
      type: entry.type
    }));
  }))), filteredEntries.length > 0 ? jsx("section", null, jsx("h2", {
    css: headingPadding
  }, jsx("strong", null, "Cards:")), jsx("ul", {
    className: classes.entriesList
  }, filteredEntries.map(function (entry) {
    return jsx("li", {
      key: shortid.generate(),
      className: classes.entry
    }, jsx(entry.component, {
      className: classes.storyCard,
      Layout: CivicCardLayoutPreview
    }));
  }))) : jsx("div", {
    css: emptyState
  }, jsx("p", null, "We haven't yet made any cards matching your selection.", jsx("br", null), jsx(Link, {
    to: {
      pathname: "/",
      hash: "#become-a-contributor"
    }
  }, "Join us"), " ", "to make it happen!"))))));
};

CardList.displayName = "CardList";
CardList.propTypes = {
  CardRegistry: PropTypes.shape({}),
  tagsList: PropTypes.shape({
    topics: PropTypes.arrayOf(PropTypes.string),
    locations: PropTypes.arrayOf(PropTypes.string),
    visualizations: PropTypes.arrayOf(PropTypes.string)
  }),
  projects: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.title,
    description: PropTypes.description,
    link: PropTypes.link
  }))
};
export default CardList;