"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;

var Sort = function Sort(props) {
  var open = props.open,
      currentSort = props.currentSort,
      sortOptions = props.sortOptions,
      absoluteRef = props.absoluteRef;
  var hasSort = !currentSort.isDefault;
  var labels = (0, _lib.useLocalLabels)();
  return /*#__PURE__*/_react["default"].createElement(SortDropdown, {
    open: open
  }, /*#__PURE__*/_react["default"].createElement(SortLabelWrapper, {
    open: open
  }, /*#__PURE__*/_react["default"].createElement(SortLabel, {
    hasSort: hasSort
  }, labels.sortBy, hasSort ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ": ", /*#__PURE__*/_react["default"].createElement(Hint, null, currentSort.label)) : null), /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    direction: open ? 'up' : 'down'
  })), /*#__PURE__*/_react["default"].createElement(Absolute, {
    ref: absoluteRef,
    isOpen: open
  }, /*#__PURE__*/_react["default"].createElement(Container, {
    isOpen: open
  }, /*#__PURE__*/_react["default"].createElement(SortOptionsList, null, sortOptions == null ? void 0 : sortOptions.map(function (opt) {
    var isSelected = currentSort.key === opt.key;
    if (opt.isDefault) return null;
    return /*#__PURE__*/_react["default"].createElement(SortOption, {
      onClick: !isSelected ? opt.select : undefined,
      key: opt.key,
      selected: isSelected
    }, opt.label);
  })))));
};

exports.Sort = Sort;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: ", ";\n  border-radius: 0 0 0 2rem;\n  background: ", ";\n  padding-bottom: 1.5rem;\n  padding-right: 2.8rem;\n  padding-top: 2.4rem;\n  padding-left: 2.4rem;\n"])), function (props) {
  return props.isOpen ? 'translateY(0)' : 'translateY(-100%)';
}, function (_ref) {
  var theme = _ref.theme;
  return theme.palette.secondary;
});

var Hint = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.hint;
});

var SortDropdown = _styledComponents["default"].div.attrs({
  className: 'px-2 d-none d-md-block'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-radius: 0.4rem;\n  position: relative;\n  ", "\n  cursor: pointer;\n  &:focus {\n    outline: none;\n  }\n"])), function (props) {
  return props.open && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      border: none;\n      z-index: 200;\n    "])));
});

var SortLabelWrapper = _styledComponents["default"].label.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  cursor: pointer;\n  width: 100%;\n"])));

var SortLabel = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'span',
  variant: 'base',
  color: 'primary',
  className: 'pr-2'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  user-select: none;\n  text-align: right;\n  line-height: 2.8;\n  cursor: pointer;\n  font-weight: 500;\n  position: relative;\n  @media (max-width: ", ") {\n    ", "\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.sm.max;
}, function (props) {
  return props.hasSort && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n        &:after {\n          content: '1';\n          width: 1.6rem;\n          height: 1.6rem;\n          font-size: 0.9rem;\n          font-weight: bold;\n          text-align: center;\n          line-height: 1.6rem;\n          vertical-align: middle;\n          color: ", ";\n          background-color: ", ";\n          position: absolute;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          border-radius: 50%;\n          top: 0.6rem;\n          right: 0;\n        }\n      "])), function (_ref4) {
    var theme = _ref4.theme;
    return theme.palette.secondary;
  }, function (_ref5) {
    var theme = _ref5.theme;
    return theme.palette.primary;
  });
});

var Absolute = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  right: -1.2rem;\n  position: absolute;\n  top: 3.8rem;\n  z-index: 100;\n  overflow: hidden;\n  max-width: none;\n  width: fit-content;\n  pointer-events: ", ";\n"])), function (props) {
  return props.isOpen ? 'all' : 'none';
});

var SortOptionsList = _styledComponents["default"].ul.attrs({
  className: 'd-flex flex-column'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  z-index: -1;\n  list-style-type: none;\n  border-radius: 0.4rem;\n"])));

var SortOption = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'li',
  variant: 'base',
  color: 'primary',
  className: 'px-2 d-flex justify-content-end align-items-center'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 3.2rem;\n  cursor: pointer;\n  letter-spacing: normal;\n  line-height: 1.46;\n  white-space: nowrap;\n  &:hover {\n    color: ", ";\n  }\n  ", ";\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.hint;
}, function (props) {
  return props.selected && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      color: ", ";\n      cursor: not-allowed;\n    "])), function (_ref7) {
    var theme = _ref7.theme;
    return theme.palette.hint;
  });
});
//# sourceMappingURL=index.js.map