"use strict";

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

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

var _react = require("react");

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

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

var _reactRouter = require("react-router");

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 _BrandColors = _interopRequireDefault(require("../_Themes/Brand/BrandColors"));

var _ProjectCard = _interopRequireDefault(require("./ProjectCard"));

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

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

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

var emptyState = (0, _core.css)(_templateObject(), _BrandColors["default"].action.hex);
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 filterPadding = (0, _core.css)(_templateObject2());
var headingPadding = (0, _core.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 = (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 _useState5 = (0, _react.useState)(true),
      _useState6 = _slicedToArray(_useState5, 2),
      openTopic = _useState6[0],
      setOpenTopic = _useState6[1];

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

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

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

  var _useState11 = (0, _react.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 = (0, _core.jsx)("div", {
    className: classes.toolbar
  }, (0, _core.jsx)("h1", {
    css: filterPadding
  }, "Filters"), (0, _core.jsx)(_List["default"], {
    component: "aside",
    "aria-labelledby": "nested-list-subheader",
    className: classes.filtersList
  }, Object.keys(tagsList).map(function (category) {
    return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_ListItem["default"], {
      button: true,
      onClick: categoryHandlers["".concat(category, "Handler")]
    }, (0, _core.jsx)(_ListItemText["default"], {
      className: classes.categoryListText,
      primary: category.replace(/^\w/, function (c) {
        return c.toUpperCase();
      })
    }), categoryOpeners[category] ? (0, _core.jsx)(_ExpandMore["default"], null) : (0, _core.jsx)(_ChevronRight["default"], null)), (0, _core.jsx)(_Collapse["default"], {
      "in": categoryOpeners[category],
      timeout: "auto",
      unmountOnExit: true
    }, (0, _core.jsx)(_List["default"], {
      component: "ul",
      disablePadding: true
    }, tagsList[category].sort().map(function (topic) {
      return (0, _core.jsx)(_ListItem["default"], {
        key: _shortid["default"].generate(),
        className: classes.nested
      }, (0, _core.jsx)(_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;
  };

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

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)
  }),
  projects: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    title: _propTypes["default"].title,
    description: _propTypes["default"].description,
    link: _propTypes["default"].link
  }))
};
var _default = CardList;
exports["default"] = _default;