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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import { useSort, useClickOutside, useListingConfig } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { Sort } from '../Sort';
export var SortStrip = () => {
  var {
    sortOptions: sortOptionsRaw,
    defaultSortKey: defaultSortKeyRaw
  } = useListingConfig();
  var {
    selectedSort,
    sortOptions
  } = useSort({
    sorts: sortOptionsRaw,
    defaultSortKey: defaultSortKeyRaw
  });
  var [open, setOpen] = React.useState(false);

  var toggleSort = forceClose => forceClose === true ? setOpen(false) : setOpen(!open);

  var containerRef = React.useRef(null);
  var absoluteRef = React.useRef(null);
  useClickOutside(containerRef, () => toggleSort(true), [absoluteRef]);
  return /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SortRefineWrapper, {
    onClick: toggleSort,
    ref: containerRef
  }, /*#__PURE__*/React.createElement(Sort, {
    open: open,
    currentSort: selectedSort,
    sortOptions: sortOptions || [],
    absoluteRef: absoluteRef
  }))));
};
var RelativeContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var SortRefineWrapper = styled.div.attrs({
  className: 'd-flex justify-content-md-end justify-content-center align-items-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map