import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React, { useState } from 'react';
import styled from 'styled-components';
import { IconFilters, IconClose } from '../../../Common';
import { useStoresContext } from '../../stores.context';
export var StoreTypes = (_ref) => {
  var {
    types,
    label
  } = _ref;
  var [isToggled, setIsToggled] = useState(false);
  var {
    filterByStoreType,
    selectedType
  } = useStoresContext();

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

  return /*#__PURE__*/React.createElement(StoreTypeWrapper, {
    onBlur: () => setIsToggled(false)
  }, /*#__PURE__*/React.createElement(StoreTypeToggle, {
    onClick: () => setIsToggled(!isToggled)
  }, isToggled ? /*#__PURE__*/React.createElement(IconClose, null) : /*#__PURE__*/React.createElement(IconFilters, null)), isToggled && /*#__PURE__*/React.createElement(StoreTypeList, null, /*#__PURE__*/React.createElement(StoreTypeTitle, null, label), types.map((type, index) => /*#__PURE__*/React.createElement(StoreTypeEntry, {
    key: "Type__" + type + "--" + index,
    onClick: () => handleClick(type),
    bold: type === selectedType
  }, type))));
};
var StoreTypeWrapper = styled.div.attrs({
  className: 'd-flex justify-content-center align-items-center',
  tabIndex: 0
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var StoreTypeList = styled.ul.attrs({
  className: 'mt-3 p-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.grey;
});
var StoreTypeTitle = styled.h3.attrs({
  className: 'py-2 px-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var StoreTypeEntry = styled.li.attrs({
  className: 'mb-2 px-2 py-1'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  font-weight: ", ";\n"])), props => props.bold ? 'bold' : 'normal');
var StoreTypeToggle = styled.a.attrs({
  className: 'm-0'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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