"use strict";

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

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

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

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

var _lib = require("@sentecacommerce-theme/lib");

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

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

var _templateObject, _templateObject2, _templateObject3;

var SizesList = function SizesList(_ref) {
  var items = _ref.items;
  items == null ? void 0 : items.sort(function (a, b) {
    return Number(b.selected) - Number(a.selected);
  });
  return /*#__PURE__*/_react["default"].createElement(_Common.ScrollView, {
    maxHeight: "none",
    maxWidth: "100vw",
    overflowDirection: "x"
  }, /*#__PURE__*/_react["default"].createElement(Row, null, items == null ? void 0 : items.map(function (filter, i) {
    var label = (0, _lib.getTermsAggregationLabel)(filter) || null;
    return /*#__PURE__*/_react["default"].createElement(Wrapper, {
      key: "Filter__" + label + "--" + i,
      onClick: function onClick() {
        return filter.onClick();
      },
      isSelected: filter.selected
    }, /*#__PURE__*/_react["default"].createElement(Label, {
      isSelected: filter.selected
    }, label));
  })));
};

exports.SizesList = SizesList;

var Row = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Wrapper = _styledComponents["default"].div.attrs({
  className: 'mb-3 d-flex flex-column align-items-center mx-2 px-3 py-1'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-radius: 0.3rem;\n  background: ", ";\n"])), function (_ref2) {
  var theme = _ref2.theme,
      isSelected = _ref2.isSelected;
  return isSelected ? theme.palette.primary : theme.palette.whiteSmoke;
});

var Label = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'a',
  variant: 5,
  className: 'd-block px-md-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
  var theme = _ref3.theme,
      isSelected = _ref3.isSelected;
  return isSelected ? theme.palette.whiteSmoke : theme.palette.primary;
});
//# sourceMappingURL=index.js.map