"use strict";

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

var _react = _interopRequireWildcard(require("react"));

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

var _shortid = _interopRequireDefault(require("shortid"));

var _List = _interopRequireDefault(require("@material-ui/core/List"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));

var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));

var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));

var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));

var _Hidden = _interopRequireDefault(require("@material-ui/core/Hidden"));

var _CssBaseline = _interopRequireDefault(require("@material-ui/core/CssBaseline"));

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

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

var _Header = _interopRequireDefault(require("../Header/Header"));

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

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

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

var drawerWidth = 240;
var headerHeight = 72;
var drawerGap = 0;
var useStyles = (0, _styles.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 = (0, _react.useState)(true),
      _useState2 = _slicedToArray(_useState, 2),
      showAllStories = _useState2[0],
      setShowAllStories = _useState2[1];

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

  var _React$useState = _react["default"].useState(true),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      openTopic = _React$useState2[0],
      setOpenTopic = _React$useState2[1];

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

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

  var theme = (0, _styles.useTheme)();

  var _useState5 = (0, _react.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["default"].createElement("div", {
    className: classes.toolbar
  }, _react["default"].createElement("h1", null, "Filters"), _react["default"].createElement(_List["default"], {
    component: "aside",
    "aria-labelledby": "nested-list-subheader",
    className: classes.filtersList
  }, Object.keys(tagsList).map(function (category) {
    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_ListItem["default"], {
      button: true,
      onClick: categoryHandlers["".concat(category, "Handler")]
    }, _react["default"].createElement(_ListItemText["default"], {
      className: classes.categoryListText,
      primary: category.replace(/^\w/, function (c) {
        return c.toUpperCase();
      })
    }), categoryOpeners[category] ? _react["default"].createElement(_ExpandMore["default"], null) : _react["default"].createElement(_ChevronRight["default"], null)), _react["default"].createElement(_Collapse["default"], {
      "in": categoryOpeners[category],
      timeout: "auto",
      unmountOnExit: true
    }, _react["default"].createElement(_List["default"], {
      component: "ul",
      disablePadding: true
    }, tagsList[category].sort().map(function (topic) {
      return _react["default"].createElement(_ListItem["default"], {
        key: _shortid["default"].generate(),
        className: classes.nested
      }, _react["default"].createElement(_index.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["default"].createElement(_react.Fragment, null, _react["default"].createElement(_Header["default"], null), _react["default"].createElement(_styles2.ThemeProvider, {
    theme: _index.MaterialTheme
  }, _react["default"].createElement("div", {
    className: classes.root
  }, _react["default"].createElement(_CssBaseline["default"], null), _react["default"].createElement("nav", {
    className: classes.drawer,
    "aria-label": "mailbox folders"
  }, _react["default"].createElement(_Hidden["default"], {
    smUp: true,
    implementation: "css"
  }, _react["default"].createElement(_Drawer["default"], {
    variant: "temporary",
    anchor: theme.direction === "rtl" ? "right" : "left",
    open: mobileOpen,
    onClose: handleDrawerToggle,
    classes: {
      paper: classes.drawerPaper
    },
    ModalProps: {
      keepMounted: true
    }
  }, drawer)), _react["default"].createElement(_Hidden["default"], {
    xsDown: true,
    implementation: "css"
  }, _react["default"].createElement(_Drawer["default"], {
    classes: {
      paper: classes.drawerPaper
    },
    variant: "permanent",
    open: true
  }, drawer))), _react["default"].createElement("main", {
    className: classes.content
  }, _react["default"].createElement("h1", null, "Cards Under Construction"), _react["default"].createElement("section", {
    className: classes.filtersButton
  }, _react["default"].createElement(_index.Button, {
    "aria-label": "open filters list",
    onClick: handleDrawerToggle
  }, "Filter Stories")), _react["default"].createElement("ul", {
    className: classes.entriesList
  }, entries.filter(function (entry) {
    return filterCardsBasedOnActiveTags(entry.component.tags);
  }).map(function (entry) {
    return _react["default"].createElement("li", {
      key: _shortid["default"].generate(),
      className: classes.entry
    }, _react["default"].createElement(entry.component, {
      className: classes.storyCard,
      Layout: _index.CivicCardLayoutPreview
    }));
  }))))));
};

CardList.displayName = "CardList";
CardList.propTypes = {
  CardRegistry: _propTypes["default"].shape({}),
  tagsList: _propTypes["default"].shape({
    topics: _propTypes["default"].arrayOf(_propTypes["default"].string),
    locations: _propTypes["default"].arrayOf(_propTypes["default"].string),
    visualizations: _propTypes["default"].arrayOf(_propTypes["default"].string)
  })
};
var _default = CardList;
exports["default"] = _default;