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

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

import React, { useCallback, useEffect, useRef, useState } from 'react';
import styled, { css } from 'styled-components';
import { TextInput as Input, Loader } from '../../../';
import { ScrollView } from '../../../Common/ScrollView';
import { IconCheck, IconClose, IconAnimatedArrow } from '../../../Common/Icons';
import { isTouchDevice, getElementOffset } from '@sentecacommerce-theme/lib';
import { useStrings } from '@sentecacommerce-theme/lib';
export var Autosuggest = (_ref) => {
  var {
    options,
    updateOptions,
    onOptionSelect,
    isFetching,
    getValue,
    getLabel,
    minLength = 3,
    debounceDelay = 400,
    selectedOption = '',
    disabled = false,
    withRemoveIconWhenSelected = false,
    onRemove,
    label
  } = _ref;
  var [query, setQuery] = useState('');
  var [isLoading, setIsLoading] = useState(isFetching);
  var [isFocused, setIsFocused] = useState(false);
  var [arrowDirection, setArrowDirection] = useState('down');
  var inputRef = useRef(null);
  var labels = useStrings('stores');

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

  var hideInput = useCallback(() => {
    setIsFocused(false);
  }, []);

  var handleClick = value => 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 = () => {
    if (inputRef.current && isTouchDevice()) {
      var data = getElementOffset(inputRef.current);
      window.scrollTo({
        top: data.top - 70
      });
    }

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

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

  useEffect(() => {
    if (query.length < minLength) return;

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

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

  var 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 = () => {
    setTimeout(() => {
      hideInput();
    }, 50);
    setArrowDirection('down');
  };

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

  return /*#__PURE__*/React.createElement(Rel, null, /*#__PURE__*/React.createElement(Container, {
    isDisabled: disabled,
    isFocused: isFocused,
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
    onChange: onChange,
    value: query,
    onFocus: onFocus,
    onBlur: onBlur,
    disabled: disabled,
    label: label,
    inputSize: "normal",
    inputRef: inputRef,
    onMouseEnter: () => window.addEventListener('click', hideInput),
    onMouseLeave: () => window.removeEventListener('click', hideInput)
  }), /*#__PURE__*/React.createElement(InputIcon, null, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: arrowDirection
  }))), /*#__PURE__*/React.createElement(OptionList, {
    isFocused: isFocused,
    style: {
      height
    }
  }, isValidQuery && !showLoader && /*#__PURE__*/React.createElement(ScrollView, {
    maxHeight: "40.5rem"
  }, /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => {
    var value = getValue(option);
    var optionLabel = getLabel(option);
    return /*#__PURE__*/React.createElement(Option, {
      onMouseDown: handleClick(option),
      key: "Option__" + value + "--" + optionLabel
    }, optionLabel);
  }))), isValidQuery && !showLoader && !options.length && /*#__PURE__*/React.createElement(Center, null, labels.noCitiesFoundLabel), showLoader && /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(Loader, null)))), !isExpandable && /*#__PURE__*/React.createElement(RemoveIconContainer, {
    onClick: handleRemove
  }, /*#__PURE__*/React.createElement(IconClose, null), /*#__PURE__*/React.createElement(IconCheck, null)));
};
var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var InputIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var DefaultStyle = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.disabled;
});
var Option = styled(DefaultStyle)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.disabled;
});
var Center = styled(DefaultStyle)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n"])));
var RemoveIconContainer = styled.button.attrs({
  type: 'button'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.danger;
});
var Container = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  ", "\n\n  ", "\n"])), props => props.isDisabled && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\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    "])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
}), props => props.isFocused && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      & input {\n        border-color: ", " !important;\n      }\n    "])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.hint;
}));
var OptionList = styled.ul(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\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"])), props => props.isFocused ? props.theme.palette.secondary : 'transparent', props => props.isFocused ? props.theme.palette.hint : 'transparent', props => props.isFocused ? 'height 0.2s ease' : 'height 0.2s ease, background 0s ease 0.1s, border 0s ease 0.1s');
//# sourceMappingURL=index.js.map