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

import React, { useState, Fragment } from "react";
import PropTypes from "prop-types";
import shortid from "shortid";
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 { Checkbox, CivicCardLayoutPreview, MaterialTheme, Button } from "../index";
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 tagsListExample = {
  topics: ["Transportation", "Disaster Resilience", "Housing"],
  locations: ["Portland", "Nationwide", "Your City"],
  visualizations: ["Bar Chart", "Cloropleth Map", "Scatterplot"]
};

var CardList = function CardList(_ref) {
  var CardRegistry = _ref.CardRegistry,
      _ref$tagsList = _ref.tagsList,
      tagsList = _ref$tagsList === void 0 ? tagsListExample : _ref$tagsList;
  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 _React$useState = React.useState(true),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      openTopic = _React$useState2[0],
      setOpenTopic = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      openLocation = _React$useState4[0],
      setOpenLocation = _React$useState4[1];

  var _React$useState5 = React.useState(false),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      openVisualization = _React$useState6[0],
      setOpenVisualization = _React$useState6[1];

  var theme = useTheme();

  var _useState5 = useState(allTagsFalse),
      _useState6 = _slicedToArray(_useState5, 2),
      activeTags = _useState6[0],
      setActiveTags = _useState6[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 = React.createElement("div", {
    className: classes.toolbar
  }, React.createElement("h1", null, "Filters"), React.createElement(List, {
    component: "aside",
    "aria-labelledby": "nested-list-subheader",
    className: classes.filtersList
  }, Object.keys(tagsList).map(function (category) {
    return React.createElement(React.Fragment, null, React.createElement(ListItem, {
      button: true,
      onClick: categoryHandlers["".concat(category, "Handler")]
    }, React.createElement(ListItemText, {
      className: classes.categoryListText,
      primary: category.replace(/^\w/, function (c) {
        return c.toUpperCase();
      })
    }), categoryOpeners[category] ? React.createElement(ExpandMore, null) : React.createElement(ChevronRight, null)), React.createElement(Collapse, {
      "in": categoryOpeners[category],
      timeout: "auto",
      unmountOnExit: true
    }, React.createElement(List, {
      component: "ul",
      disablePadding: true
    }, tagsList[category].sort().map(function (topic) {
      return React.createElement(ListItem, {
        key: shortid.generate(),
        className: classes.nested
      }, React.createElement(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;
  };

  return React.createElement(Fragment, null, React.createElement(Header, null), React.createElement(ThemeProvider, {
    theme: MaterialTheme
  }, React.createElement("div", {
    className: classes.root
  }, React.createElement(CssBaseline, null), React.createElement("nav", {
    className: classes.drawer,
    "aria-label": "mailbox folders"
  }, React.createElement(Hidden, {
    smUp: true,
    implementation: "css"
  }, React.createElement(Drawer, {
    variant: "temporary",
    anchor: theme.direction === "rtl" ? "right" : "left",
    open: mobileOpen,
    onClose: handleDrawerToggle,
    classes: {
      paper: classes.drawerPaper
    },
    ModalProps: {
      keepMounted: true
    }
  }, drawer)), React.createElement(Hidden, {
    xsDown: true,
    implementation: "css"
  }, React.createElement(Drawer, {
    classes: {
      paper: classes.drawerPaper
    },
    variant: "permanent",
    open: true
  }, drawer))), React.createElement("main", {
    className: classes.content
  }, React.createElement("h1", null, "Cards Under Construction"), React.createElement("section", {
    className: classes.filtersButton
  }, React.createElement(Button, {
    "aria-label": "open filters list",
    onClick: handleDrawerToggle
  }, "Filter Stories")), React.createElement("ul", {
    className: classes.entriesList
  }, entries.filter(function (entry) {
    return filterCardsBasedOnActiveTags(entry.component.tags);
  }).map(function (entry) {
    return React.createElement("li", {
      key: shortid.generate(),
      className: classes.entry
    }, React.createElement(entry.component, {
      className: classes.storyCard,
      Layout: CivicCardLayoutPreview
    }));
  }))))));
};

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)
  })
};
export default CardList;