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

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

import React from 'react';
import styled, { css } from 'styled-components';
import { Typography, IconAnimatedArrow } from '../../../Common';
import { useLocalLabels } from '@sentecacommerce-theme/lib';
export var Sort = props => {
  var {
    open,
    currentSort,
    sortOptions,
    absoluteRef
  } = props;
  var hasSort = !currentSort.isDefault;
  var labels = useLocalLabels();
  return /*#__PURE__*/React.createElement(SortDropdown, {
    open: open
  }, /*#__PURE__*/React.createElement(SortLabelWrapper, {
    open: open
  }, /*#__PURE__*/React.createElement(SortLabel, {
    hasSort: hasSort
  }, labels.sortBy, hasSort ? /*#__PURE__*/React.createElement(React.Fragment, null, ": ", /*#__PURE__*/React.createElement(Hint, null, currentSort.label)) : null), /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: open ? 'up' : 'down'
  })), /*#__PURE__*/React.createElement(Absolute, {
    ref: absoluteRef,
    isOpen: open
  }, /*#__PURE__*/React.createElement(Container, {
    isOpen: open
  }, /*#__PURE__*/React.createElement(SortOptionsList, null, sortOptions == null ? void 0 : sortOptions.map(opt => {
    var isSelected = currentSort.key === opt.key;
    if (opt.isDefault) return null;
    return /*#__PURE__*/React.createElement(SortOption, {
      onClick: !isSelected ? opt.select : undefined,
      key: opt.key,
      selected: isSelected
    }, opt.label);
  })))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.isOpen ? 'translateY(0)' : 'translateY(-100%)', (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.secondary;
});
var Hint = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
});
var SortDropdown = styled.div.attrs({
  className: 'px-2 d-none d-md-block'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.4rem;\n  position: relative;\n  ", "\n  cursor: pointer;\n  &:focus {\n    outline: none;\n  }\n"])), props => props.open && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: none;\n      z-index: 200;\n    "]))));
var SortLabelWrapper = styled.label.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  width: 100%;\n"])));
var SortLabel = styled(Typography).attrs({
  as: 'span',
  variant: 'base',
  color: 'primary',
  className: 'pr-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.sm.max;
}, props => props.hasSort && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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      "])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}));
var Absolute = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\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"])), props => props.isOpen ? 'all' : 'none');
var SortOptionsList = styled.ul.attrs({
  className: 'd-flex flex-column'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  z-index: -1;\n  list-style-type: none;\n  border-radius: 0.4rem;\n"])));
var SortOption = styled(Typography).attrs({
  as: 'li',
  variant: 'base',
  color: 'primary',
  className: 'px-2 d-flex justify-content-end align-items-center'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\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"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.hint;
}, props => props.selected && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: not-allowed;\n    "])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.hint;
}));
//# sourceMappingURL=index.js.map