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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import styled from 'styled-components';
import { useSort } from '@sentecacommerce-theme/lib';
import { FilterWrapper } from '../../../Aggregates/Components/FilterWrapper';
export var MobileSort = (_ref) => {
  var {
    sortOptions: sortOptionsRaw,
    defaultSortKey
  } = _ref;
  var {
    sortOptions,
    selectedSort,
    resetSort
  } = useSort({
    defaultSortKey,
    sorts: sortOptionsRaw
  });
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(FilterWrapper, {
    filterName: "Sort by"
  }, /*#__PURE__*/React.createElement(SortOptionsList, null, sortOptions.map((sort, i) => {
    if (sort.isDefault) return null;
    var isSelected = selectedSort.key === sort.key;
    return /*#__PURE__*/React.createElement(SortOption, {
      key: "Sort__" + (sort.key || i),
      isSelected: isSelected,
      onClick: isSelected ? resetSort : sort.select
    }, sort.label);
  }))));
};
var Container = styled.div.attrs({
  className: 'd-block d-md-none'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var SortOptionsList = styled.div.attrs({
  className: 'd-flex'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-x: scroll;\n"])));
var SortOption = styled.div.attrs({
  className: 'py-2 px-2 mr-2',
  tabIndex: 0
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), props => props.isSelected ? props.theme.palette.secondary : props.theme.palette.secondary, props => props.isSelected ? props.theme.palette.primary : props.theme.palette.disabled);
//# sourceMappingURL=index.js.map