"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.StoreTypes = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Common = require("../../../Common");

var _stores = require("../../stores.context");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var StoreTypes = function StoreTypes(_ref) {
  var types = _ref.types,
      label = _ref.label;

  var _useState = (0, _react.useState)(false),
      isToggled = _useState[0],
      setIsToggled = _useState[1];

  var _useStoresContext = (0, _stores.useStoresContext)(),
      filterByStoreType = _useStoresContext.filterByStoreType,
      selectedType = _useStoresContext.selectedType;

  var handleClick = function handleClick(type) {
    filterByStoreType(type);
    setIsToggled(false);
  };

  return /*#__PURE__*/_react["default"].createElement(StoreTypeWrapper, {
    onBlur: function onBlur() {
      return setIsToggled(false);
    }
  }, /*#__PURE__*/_react["default"].createElement(StoreTypeToggle, {
    onClick: function onClick() {
      return setIsToggled(!isToggled);
    }
  }, isToggled ? /*#__PURE__*/_react["default"].createElement(_Common.IconClose, null) : /*#__PURE__*/_react["default"].createElement(_Common.IconFilters, null)), isToggled && /*#__PURE__*/_react["default"].createElement(StoreTypeList, null, /*#__PURE__*/_react["default"].createElement(StoreTypeTitle, null, label), types.map(function (type, index) {
    return /*#__PURE__*/_react["default"].createElement(StoreTypeEntry, {
      key: "Type__" + type + "--" + index,
      onClick: function onClick() {
        return handleClick(type);
      },
      bold: type === selectedType
    }, type);
  })));
};

exports.StoreTypes = StoreTypes;

var StoreTypeWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center align-items-center',
  tabIndex: 0
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var StoreTypeList = _styledComponents["default"].ul.attrs({
  className: 'mt-3 p-3'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  right: 0;\n\n  z-index: 10;\n\n  color: ", ";\n  background-color: ", ";\n  min-height: 15.5rem;\n\n  border: 1px solid ", ";\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.grey;
});

var StoreTypeTitle = _styledComponents["default"].h3.attrs({
  className: 'py-2 px-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var StoreTypeEntry = _styledComponents["default"].li.attrs({
  className: 'mb-2 px-2 py-1'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n\n  font-weight: ", ";\n"])), function (props) {
  return props.bold ? 'bold' : 'normal';
});

var StoreTypeToggle = _styledComponents["default"].a.attrs({
  className: 'm-0'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n\n  outline: none;\n  border: none;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  padding: 1rem;\n\n  & > svg {\n    width: 2.4rem;\n    height: 1.4rem;\n  }\n"])));
//# sourceMappingURL=index.js.map