"use strict";

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

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

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

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

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

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

var _ = require("../../../");

var _ScrollView = require("../../../Common/ScrollView");

var _Icons = require("../../../Common/Icons");

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

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

var Autosuggest = function Autosuggest(_ref) {
  var options = _ref.options,
      updateOptions = _ref.updateOptions,
      onOptionSelect = _ref.onOptionSelect,
      isFetching = _ref.isFetching,
      getValue = _ref.getValue,
      getLabel = _ref.getLabel,
      _ref$minLength = _ref.minLength,
      minLength = _ref$minLength === void 0 ? 3 : _ref$minLength,
      _ref$debounceDelay = _ref.debounceDelay,
      debounceDelay = _ref$debounceDelay === void 0 ? 400 : _ref$debounceDelay,
      _ref$selectedOption = _ref.selectedOption,
      selectedOption = _ref$selectedOption === void 0 ? '' : _ref$selectedOption,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$withRemoveIconWh = _ref.withRemoveIconWhenSelected,
      withRemoveIconWhenSelected = _ref$withRemoveIconWh === void 0 ? false : _ref$withRemoveIconWh,
      onRemove = _ref.onRemove,
      label = _ref.label;

  var _useState = (0, _react.useState)(''),
      query = _useState[0],
      setQuery = _useState[1];

  var _useState2 = (0, _react.useState)(isFetching),
      isLoading = _useState2[0],
      setIsLoading = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      isFocused = _useState3[0],
      setIsFocused = _useState3[1];

  var _useState4 = (0, _react.useState)('down'),
      arrowDirection = _useState4[0],
      setArrowDirection = _useState4[1];

  var inputRef = (0, _react.useRef)(null);
  var labels = (0, _lib.useStrings)('stores');

  var onChange = function onChange(e) {
    setIsFocused(true);
    setQuery(e.target.value);
  };

  var hideInput = (0, _react.useCallback)(function () {
    setIsFocused(false);
  }, []);

  var handleClick = function handleClick(value) {
    return function (e) {
      var _inputRef$current;

      e.preventDefault();
      e.stopPropagation();
      onOptionSelect(value);
      hideInput();
      setQuery(value);
      inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.blur();
    };
  };

  var onFocus = function onFocus() {
    if (inputRef.current && (0, _lib.isTouchDevice)()) {
      var data = (0, _lib.getElementOffset)(inputRef.current);
      window.scrollTo({
        top: data.top - 70
      });
    }

    if (selectedOption) {
      setQuery('');
    }

    setArrowDirection('up');
    setIsFocused(true);
  };

  (0, _react.useEffect)(function () {
    if (query.length < minLength) return;

    if (!debounceDelay) {
      updateOptions(query);
      isLoading && setIsLoading(false);
      return;
    }

    setIsLoading(true);
    var timeout = setTimeout(function () {
      updateOptions(query);
      setIsLoading(false);
    }, debounceDelay);
    return function () {
      clearTimeout(timeout);
    };
  }, [query, minLength, updateOptions, debounceDelay]);
  var isValidQuery = query.length >= minLength;
  var isExpandable = !selectedOption || selectedOption && !withRemoveIconWhenSelected;
  var showLoader = (isLoading || isFetching) && isValidQuery;

  var getContainerHeight = function getContainerHeight() {
    if (!isFocused || !isExpandable) {
      return 0;
    }

    if (isValidQuery && !showLoader && options.length) {
      return Math.min(options.length * 52.5, 405);
    }

    return 80;
  };

  var height = getContainerHeight() / 10 + "rem";

  var onBlur = function onBlur() {
    setTimeout(function () {
      hideInput();
    }, 50);
    setArrowDirection('down');
  };

  var handleRemove = function handleRemove(e) {
    e == null ? void 0 : e.preventDefault();
    setQuery('');
    onRemove();
  };

  return /*#__PURE__*/_react["default"].createElement(Rel, null, /*#__PURE__*/_react["default"].createElement(Container, {
    isDisabled: disabled,
    isFocused: isFocused,
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, /*#__PURE__*/_react["default"].createElement(InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_.TextInput, {
    onChange: onChange,
    value: query,
    onFocus: onFocus,
    onBlur: onBlur,
    disabled: disabled,
    label: label,
    inputSize: "normal",
    inputRef: inputRef,
    onMouseEnter: function onMouseEnter() {
      return window.addEventListener('click', hideInput);
    },
    onMouseLeave: function onMouseLeave() {
      return window.removeEventListener('click', hideInput);
    }
  }), /*#__PURE__*/_react["default"].createElement(InputIcon, null, /*#__PURE__*/_react["default"].createElement(_Icons.IconAnimatedArrow, {
    direction: arrowDirection
  }))), /*#__PURE__*/_react["default"].createElement(OptionList, {
    isFocused: isFocused,
    style: {
      height: height
    }
  }, isValidQuery && !showLoader && /*#__PURE__*/_react["default"].createElement(_ScrollView.ScrollView, {
    maxHeight: "40.5rem"
  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (option) {
    var value = getValue(option);
    var optionLabel = getLabel(option);
    return /*#__PURE__*/_react["default"].createElement(Option, {
      onMouseDown: handleClick(option),
      key: "Option__" + value + "--" + optionLabel
    }, optionLabel);
  }))), isValidQuery && !showLoader && !options.length && /*#__PURE__*/_react["default"].createElement(Center, null, labels.noCitiesFoundLabel), showLoader && /*#__PURE__*/_react["default"].createElement(Center, null, /*#__PURE__*/_react["default"].createElement(_.Loader, null)))), !isExpandable && /*#__PURE__*/_react["default"].createElement(RemoveIconContainer, {
    onClick: handleRemove
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconClose, null), /*#__PURE__*/_react["default"].createElement(_Icons.IconCheck, null)));
};

exports.Autosuggest = Autosuggest;

var InputWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var InputIcon = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  right: 1rem;\n  z-index: -1;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));

var Rel = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var DefaultStyle = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  padding: 1rem 1.6rem;\n  text-align: left;\n\n  border-bottom: 0.1rem solid ", ";\n\n  &:last-child {\n    border-bottom: 0;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.disabled;
});

var Option = (0, _styledComponents["default"])(DefaultStyle)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.disabled;
});
var Center = (0, _styledComponents["default"])(DefaultStyle)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n"])));

var RemoveIconContainer = _styledComponents["default"].button.attrs({
  type: 'button'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex !important;\n  border-radius: 0.5rem !important;\n  align-items: center;\n  justify-content: flex-end;\n  padding-right: 2rem;\n  z-index: 1000;\n\n  &:hover {\n    opacity: 1 !important;\n    background-color: ", ";\n\n    & svg:first-child {\n      display: block;\n    }\n\n    & svg:last-child {\n      display: none;\n    }\n  }\n\n  & svg:last-child {\n    width: 1.5rem;\n    height: 1.5rem;\n    fill: ", ";\n  }\n\n  & svg:first-child {\n    display: none;\n    width: 1.3rem;\n    height: 1.3rem;\n    fill: ", ";\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.danger;
});

var Container = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  ", "\n\n  ", "\n"])), function (props) {
  return props.isDisabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      &:after {\n        content: '';\n        display: block;\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n        z-index: 12;\n        background: ", ";\n      }\n    "])), function (_ref7) {
    var theme = _ref7.theme;
    return theme.palette.primary;
  });
}, function (props) {
  return props.isFocused && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      & input {\n        border-color: ", " !important;\n      }\n    "])), function (_ref8) {
    var theme = _ref8.theme;
    return theme.palette.hint;
  });
});

var OptionList = _styledComponents["default"].ul(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 0;\n  transition: ;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  background: ", ";\n  position: absolute;\n  top: 4.1rem;\n  width: 100%;\n  border: 0;\n  border: 0.1rem solid\n    ", ";\n  border-top: 0;\n  z-index: 100;\n  transition: ", ";\n"])), function (props) {
  return props.isFocused ? props.theme.palette.secondary : 'transparent';
}, function (props) {
  return props.isFocused ? props.theme.palette.hint : 'transparent';
}, function (props) {
  return props.isFocused ? 'height 0.2s ease' : 'height 0.2s ease, background 0s ease 0.1s, border 0s ease 0.1s';
});
//# sourceMappingURL=index.js.map