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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import { getTermsAggregationLabel } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { ScrollView, Typography } from '../../../Common';
export var SizesList = (_ref) => {
  var {
    items
  } = _ref;
  items == null ? void 0 : items.sort((a, b) => {
    return Number(b.selected) - Number(a.selected);
  });
  return /*#__PURE__*/React.createElement(ScrollView, {
    maxHeight: "none",
    maxWidth: "100vw",
    overflowDirection: "x"
  }, /*#__PURE__*/React.createElement(Row, null, items == null ? void 0 : items.map((filter, i) => {
    var label = getTermsAggregationLabel(filter) || null;
    return /*#__PURE__*/React.createElement(Wrapper, {
      key: "Filter__" + label + "--" + i,
      onClick: () => filter.onClick(),
      isSelected: filter.selected
    }, /*#__PURE__*/React.createElement(Label, {
      isSelected: filter.selected
    }, label));
  })));
};
var Row = styled.div.attrs({
  className: 'd-flex'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Wrapper = styled.div.attrs({
  className: 'mb-3 d-flex flex-column align-items-center mx-2 px-3 py-1'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.3rem;\n  background: ", ";\n"])), (_ref2) => {
  var {
    theme,
    isSelected
  } = _ref2;
  return isSelected ? theme.palette.primary : theme.palette.whiteSmoke;
});
var Label = styled(Typography).attrs({
  as: 'a',
  variant: 5,
  className: 'd-block px-md-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  color: ", ";\n"])), (_ref3) => {
  var {
    theme,
    isSelected
  } = _ref3;
  return isSelected ? theme.palette.whiteSmoke : theme.palette.primary;
});
//# sourceMappingURL=index.js.map