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

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

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useRef, useState } from 'react';
import { getTermsAggregationLabel, useClickOutside, useSelectedFilters, useGlobalLabels } from '@sentecacommerce-theme/lib';
import styled, { css } from 'styled-components';
import { Checkbox, IconAnimatedArrow, Search as IconSearch, 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 AutocompleteFilter = (_ref) => {
  var {
    data
  } = _ref;
  var [query, setQuery] = useState('');
  var [showList, setShowList] = useState(false);
  var [isMobileModalVisible, setIsMobileModalVisible] = useState(false);

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

  var closeMobileModal = () => {
    setQuery('');
    setIsMobileModalVisible(false);
  };

  var listRef = useRef(null);
  var inputRef = useRef(null);
  var mobileSearchRef = useRef(null);

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

  var hideList = () => {
    setShowList(false);
    setQuery('');
  };

  useClickOutside(listRef, hideList, [inputRef, mobileSearchRef]);
  var itemsLength = data.items.length;
  var selectedFiltersCount = useSelectedFilters(data).length;
  var loweredQuery = query.toLowerCase(); //! TODO: optimization!

  var filteredItems = data.items.filter(filter => {
    var _labelGettersMap$data;

    if (!query) return true;
    var label = ((_labelGettersMap$data = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data.call(labelGettersMap, filter).toLowerCase()) || '';
    return label.includes(loweredQuery);
  });
  var {
    buttons
  } = useGlobalLabels();
  return /*#__PURE__*/React.createElement(FilterWrapper, {
    filterName: data.name,
    count: selectedFiltersCount
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Label, {
    isListVisible: showList
  }, /*#__PURE__*/React.createElement(LabelContent, null, /*#__PURE__*/React.createElement(LabelText, {
    isListVisible: showList
  }, buttons.choose, " ", data.name), /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: showList ? 'up' : 'down'
  })), /*#__PURE__*/React.createElement(Input, {
    isListVisible: showList,
    ref: inputRef,
    value: query,
    onChange: e => setQuery(e.target.value),
    onFocus: showList ? hideList : openList
  })), /*#__PURE__*/React.createElement(List, {
    isVisible: showList,
    ref: listRef
  }, filteredItems.map((filter, i) => {
    var _labelGettersMap$data2;

    var label = ((_labelGettersMap$data2 = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data2.call(labelGettersMap, filter)) || null;
    return /*#__PURE__*/React.createElement(Wrapper, {
      key: "Facet-" + (label || i)
    }, /*#__PURE__*/React.createElement(Checkbox, {
      onChange: () => filter.onClick(),
      isChecked: filter.selected,
      label: label,
      size: "tiny"
    }));
  }))), /*#__PURE__*/React.createElement(MobileContainer, {
    className: "mt-2 d-md-none"
  }, /*#__PURE__*/React.createElement(Relative, {
    onClick: openMobileModal,
    iconRight: true
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: "Choose " + data.name,
    isSearch: true,
    disabled: true
  }), /*#__PURE__*/React.createElement(IconSearch, null))), isMobileModalVisible && /*#__PURE__*/React.createElement(AnimatedModal, {
    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, {
    ref: mobileSearchRef
  }, /*#__PURE__*/React.createElement(Relative, {
    className: "mb-4"
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: "Choose " + data.name,
    isSearch: true,
    value: query,
    onChange: e => setQuery(e.target.value),
    style: {
      paddingLeft: '3.8rem'
    }
  }), /*#__PURE__*/React.createElement(IconSearch, null)), /*#__PURE__*/React.createElement(CheckboxList, {
    items: filteredItems,
    type: data.type
  }))));
};
var Input = styled.input.attrs({
  className: 'd-flex align-items-center justify-content-between py-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  border: 0.1rem solid\n    ", ";\n  border-radius: 0 !important;\n  width: 100%;\n  height: 4.7rem;\n  background: ", ";\n  padding: 0 1.4rem;\n\n  @media (max-width: ", ") {\n    background: ", ";\n  }\n"])), props => props.theme.palette[props.isListVisible ? 'primary' : 'light'], (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.sm.max;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
});
var Container = styled.div.attrs({
  className: 'd-none d-md-block '
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n"])));
var Relative = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  & > svg {\n    width: 2rem;\n    height: 2.4rem;\n    position: absolute;\n    top: calc(50% - 1.2rem);\n    ", "\n  }\n"])), props => props.iconRight ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n            right: 1.6rem;\n          "]))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n            left: 1.2rem;\n          "]))));
var MobileContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var Label = styled.label.attrs({
  className: 'd-block'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n"])));
var LabelText = styled.span.attrs({
  className: 'px-1'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: ", ";\n  top: ", ";\n  left: -0.4rem;\n  background: ", ";\n"])), props => props.isListVisible ? '1.2rem' : 'inherit', props => props.isListVisible ? '-2.25rem' : '0', (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.secondary;
});
var LabelContent = styled.span.attrs({
  className: 'd-flex align-items-center justify-content-between px-3 py-2'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n"])));
var List = styled.ul.attrs({
  className: 'row mx-0 py-3 px-1'
})(_templateObject10 || (_templateObject10 = _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: rgba(0, 0, 0, 0.1) 0 0.2rem 0.2rem 0,\n    rgba(0, 0, 0, 0.16) 0 1rem 1.5rem 0;\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, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.secondary;
});
var Wrapper = styled.li.attrs({
  className: 'col-12'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
var MobileItemsContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  padding: 3rem 2rem;\n"])));
//# sourceMappingURL=index.js.map