"use strict";

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

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

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

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

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

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

var _FilterWrapper = require("../../../Aggregates/Components/FilterWrapper");

var _templateObject, _templateObject2, _templateObject3;

var MobileSort = function MobileSort(_ref) {
  var sortOptionsRaw = _ref.sortOptions,
      defaultSortKey = _ref.defaultSortKey;

  var _useSort = (0, _lib.useSort)({
    defaultSortKey: defaultSortKey,
    sorts: sortOptionsRaw
  }),
      sortOptions = _useSort.sortOptions,
      selectedSort = _useSort.selectedSort,
      resetSort = _useSort.resetSort;

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_FilterWrapper.FilterWrapper, {
    filterName: "Sort by"
  }, /*#__PURE__*/_react["default"].createElement(SortOptionsList, null, sortOptions.map(function (sort, i) {
    if (sort.isDefault) return null;
    var isSelected = selectedSort.key === sort.key;
    return /*#__PURE__*/_react["default"].createElement(SortOption, {
      key: "Sort__" + (sort.key || i),
      isSelected: isSelected,
      onClick: isSelected ? resetSort : sort.select
    }, sort.label);
  }))));
};

exports.MobileSort = MobileSort;

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

var SortOptionsList = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  overflow-x: scroll;\n"])));

var SortOption = _styledComponents["default"].div.attrs({
  className: 'py-2 px-2 mr-2',
  tabIndex: 0
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: fit-content;\n  white-space: nowrap;\n  background: ", ";\n  border: 0.1rem solid\n    ", ";\n  font-size: 1.2rem;\n  font-weight: 600;\n  border-radius: 0.2rem;\n"])), function (props) {
  return props.isSelected ? props.theme.palette.secondary : props.theme.palette.secondary;
}, function (props) {
  return props.isSelected ? props.theme.palette.primary : props.theme.palette.disabled;
});
//# sourceMappingURL=index.js.map