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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

import React, { useRef, useState } from 'react';
import { getTermsAggregationLabel, useClickOutside, useSelectedFilters, useGlobalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { Checkbox, IconAnimatedArrow, AnimatedModal, Button } from '../../../../../Common';
import { FilterWrapper } from '../FilterWrapper';
import { CheckboxList } from '../CheckboxList';
import { ButtonsContainer } from '../ButtonsContainer';
var labelGettersMap = {
  terms: getTermsAggregationLabel,
  ranges: filter => {
    if (filter.data.from === '*') {
      return "\u043F\u043E\u0434 " + filter.data.to / 100 + "\u043B\u0432";
    }

    if (filter.data.to === '*') {
      return "\u043D\u0430\u0434 " + filter.data.from / 100 + "\u043B\u0432";
    }

    return filter.data.from / 100 + "\u043B\u0432 - " + filter.data.to / 100 + "\u043B\u0432";
  }
};
export var DropdownSelectFilter = (_ref) => {
  var {
    data
  } = _ref;
  var [showList, setShowList] = useState(false);
  var listRef = useRef(null);
  var labelRef = useRef(null);
  var [isMobileModalVisible, setIsMobileModalVisible] = useState(false);
  var {
    buttons
  } = useGlobalLabels();

  var openMobileModal = () => setIsMobileModalVisible(true);

  var closeMobileModal = () => setIsMobileModalVisible(false);

  var openList = () => setShowList(true);

  var hideList = () => setShowList(false);

  useClickOutside(listRef, hideList, [labelRef]);
  var selectedFilters = useSelectedFilters(data);
  var itemsLength = data.items.length;
  return /*#__PURE__*/React.createElement(FilterWrapper, {
    onMobileArrowClick: openMobileModal,
    withMobileArrow: true,
    count: selectedFilters.length,
    filterName: data.name
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Label, {
    isListVisible: showList,
    ref: labelRef,
    onClick: showList ? hideList : openList
  }, /*#__PURE__*/React.createElement("span", null, Boolean(selectedFilters.length) ? /*#__PURE__*/React.createElement("span", null, selectedFilters.map((filter, i) => {
    var _labelGettersMap$data;

    var label = ((_labelGettersMap$data = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data.call(labelGettersMap, filter)) || null;
    return /*#__PURE__*/React.createElement(SelectedFilterLabel, {
      key: "Facet-" + (label || i)
    }, label);
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons.choose, " ", data.name)), /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: showList ? 'up' : 'down'
  })), /*#__PURE__*/React.createElement(List, {
    isVisible: showList,
    ref: listRef
  }, data.items.map((filter, i) => {
    var _labelGettersMap$data2;

    var label = ((_labelGettersMap$data2 = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data2.call(labelGettersMap, filter)) || null;
    var {
      count
    } = filter.data;
    return /*#__PURE__*/React.createElement(CheckboxWrapper, {
      key: "Facet__" + (label || i)
    }, /*#__PURE__*/React.createElement(Checkbox, {
      onChange: () => filter.onClick(),
      isChecked: filter.selected,
      label: /*#__PURE__*/React.createElement(React.Fragment, null, label, Boolean(count) && /*#__PURE__*/React.createElement(Count, null, count, " ")),
      size: "tiny"
    }));
  }))), isMobileModalVisible && /*#__PURE__*/React.createElement(AnimatedModal, {
    mobileHeight: itemsLength * 39 - 9 + 80 + 'px',
    onClose: closeMobileModal,
    title: data.name,
    bottom: data.selectedCount ? (_ref2) => {
      var {
        closeModal
      } = _ref2;
      return /*#__PURE__*/React.createElement(ButtonsContainer, null, /*#__PURE__*/React.createElement(Button, {
        bordered: true,
        onClick: data.clearAll
      }, buttons.clear, " (", data.selectedCount, ")"), /*#__PURE__*/React.createElement(Button, {
        onClick: closeModal
      }, buttons.apply));
    } : undefined
  }, /*#__PURE__*/React.createElement(MobileItemsContainer, null, /*#__PURE__*/React.createElement(CheckboxList, {
    items: data.items,
    type: data.type
  }))));
};
var Container = styled.div.attrs({
  className: 'd-none d-md-block'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var List = styled.ul.attrs({
  className: 'row mx-0 py-3 px-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: translateY(", "rem);\n  position: absolute;\n  background: ", ";\n  border-radius: 0.2rem;\n  box-shadow: 0 0 1.6rem 0.4rem rgba(0, 0, 0, 0.08);\n\n  z-index: 1000;\n  width: 100%;\n  top: 5rem;\n  left: 0;\n  max-height: 16rem;\n  overflow-y: auto;\n"])), props => props.isVisible ? 1 : 0, props => props.isVisible ? 'all' : 'none', props => props.isVisible ? 1 : 0, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
});
var SelectedFilterLabel = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-size: 1.4rem;\n  font-weight: 500;\n  &:not(:last-of-type) {\n    &:after {\n      content: ', ';\n    }\n  }\n"])));
var Label = styled.button.attrs({
  className: 'd-flex align-items-center justify-content-between px-3 py-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  border: 0.1rem solid\n    ", ";\n  border-radius: 0 !important;\n  width: 100%;\n"])), props => props.theme.palette[props.isListVisible ? 'primary' : 'light']);
var CheckboxWrapper = styled.li.attrs({
  className: 'col-12'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var MobileItemsContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  padding: 3rem 2rem;\n"])));
var Count = styled.span.attrs({
  className: 'd-flex align-items-center justify-content-center ml-2 px-2'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  min-width: 2.6rem;\n  height: 2rem;\n  font-size: 1rem;\n  color: ", ";\n  font-weight: bold;\n  background-color: ", ";\n  border-radius: 4rem;\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
});
//# sourceMappingURL=index.js.map