import '../_commonjsHelpers-97e6d7b1.js';
import React, { useEffect } from 'react';
import 'react-dom';
import { c as _slicedToArray, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, S as SearchIcon } from '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import { C as Context } from '../index-155df85b.js';
import { F as Fuse } from '../fuse-b0dfead8.js';
import { u as useEnterKey } from '../useEnterKey-cb5bf7c9.js';

var css_248z = ".Search_searchWrapper__23GwC {\n  position: relative;\n  z-index: 1000000002; }\n\n.Search_search__2io88 {\n  position: relative;\n  border: 1px solid #ddd;\n  border-radius: 100px;\n  overflow: hidden;\n  background-color: #fff;\n  transition: 0.2s ease-out;\n  display: flex;\n  align-items: center; }\n  .Search_search__2io88.Search_active__2pwAt {\n    border-color: #124fa0; }\n    .Search_search__2io88.Search_active__2pwAt.Search_withDropdown__1HNno {\n      border-color: transparent;\n      background-color: transparent; }\n    .Search_search__2io88.Search_active__2pwAt .Search_searchIcon__1fe4d #search {\n      stroke: #124fa0; }\n\n.Search_searchIcon__1fe4d {\n  pointer-events: none;\n  width: 22px;\n  height: 22px;\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%); }\n  .Search_searchIcon__1fe4d #search {\n    transition: 0.2s ease-out; }\n\n.Search_searchInput__jeW_Q {\n  border: none;\n  outline: none;\n  flex: 1;\n  box-sizing: border-box;\n  resize: none;\n  background-color: transparent;\n  box-shadow: none;\n  padding: 6px 10px;\n  padding-left: 32px;\n  display: inline; }\n  .Search_searchInput__jeW_Q .Search_hint__3zfE4 {\n    text-align: right; }\n\n.Search_hint__3zfE4 {\n  color: #AAA;\n  font-size: 10px;\n  font-weight: 300;\n  padding: 6px;\n  padding-right: 12px;\n  user-select: none;\n  pointer-events: none; }\n";
var styles = {"searchWrapper":"Search_searchWrapper__23GwC","search":"Search_search__2io88","active":"Search_active__2pwAt","withDropdown":"Search_withDropdown__1HNno","searchIcon":"Search_searchIcon__1fe4d","searchInput":"Search_searchInput__jeW_Q","hint":"Search_hint__3zfE4"};
styleInject(css_248z);

var FUSE_OPTIONS = {
  shouldSort: true,
  threshold: 0.2,
  tokenize: true,
  matchAllTokens: true,
  findAllMatches: true,
  location: 0,
  distance: 50,
  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: ["title"]
};
function Search(_ref) {
  var className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    options = _ref.options,
    onChange = _ref.onChange,
    onType = _ref.onType,
    onSubmit = _ref.onSubmit,
    searchKeys = _ref.searchKeys,
    autoFocus = _ref.autoFocus,
    hint = _ref.hint,
    placeholder = _ref.placeholder,
    value = _ref.value,
    onBlur = _ref.onBlur,
    onFocus = _ref.onFocus,
    style = _ref.style;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var fuse = React.useRef();
  var searchInputRef = React.useRef();
  var _React$useState = React.useState(""),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    searchTerm = _React$useState2[0],
    setSearchTerm = _React$useState2[1];
  var _React$useState3 = React.useState(""),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    focused = _React$useState4[0],
    setFocused = _React$useState4[1];
  var handleSearch = React.useCallback(function (e) {
    var termToSearch = e.target.value;
    if (!termToSearch.length) onChange(options);else onChange(fuse.current.search(termToSearch));
    onType(termToSearch, e);
    setSearchTerm(termToSearch);
  });
  var handleFocus = React.useCallback(function (e) {
    setFocused(true);
    onFocus(e);
  });
  var handleBlur = React.useCallback(function (e) {
    setFocused(false);
    onBlur(e);
  });
  useEffect(function () {
    FUSE_OPTIONS.keys = searchKeys;
    fuse.current = new Fuse(options, FUSE_OPTIONS);
  });
  useEffect(function () {
    setSearchTerm(value);
  }, [value]);
  useEffect(function () {
    if (autoFocus && searchInputRef.current) searchInputRef.current.focus();
  }, [autoFocus]);
  useEnterKey(onSubmit, searchInputRef);
  var activeClassName = focused ? styles.active : "";
  return /*#__PURE__*/React.createElement("div", {
    style: _objectSpread2({
      borderColor: focused ? primaryColor : undefined
    }, style),
    className: "".concat(styles.search, " ").concat(prefixClassName, " ").concat(className, " ").concat(activeClassName)
  }, /*#__PURE__*/React.createElement(Icon, {
    src: SearchIcon,
    className: "".concat(styles.searchIcon, " ").concat(prefixClassName, "-icon")
  }), /*#__PURE__*/React.createElement("input", {
    ref: searchInputRef,
    type: "text",
    placeholder: placeholder,
    className: "".concat(styles.searchInput, " ").concat(prefixClassName, "-input"),
    onChange: handleSearch,
    value: searchTerm,
    autoFocus: autoFocus,
    onFocus: handleFocus,
    onBlur: handleBlur
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.hint, " ").concat(prefixClassName, "-hint")
  }, hint));
}
Search.propTypes = {
  /** The classname to appended to the outermost element */
  className: PropTypes.string,
  /** The prefix classname appended to all elements */
  prefixClassName: PropTypes.string,
  /** The input placeholder */
  placeholder: PropTypes.string,
  /** Whenever you type, an onChange callback is triggered with the results */
  onChange: PropTypes.func,
  /** Object keys to search when finding */
  searchKeys: PropTypes.array,
  /** The array of object to search */
  options: PropTypes.array,
  /** Whether to auto focus or not */
  autoFocus: PropTypes.bool,
  /** The hint text that shows up inside the search input */
  hint: PropTypes.string,
  /** The onChange for the input (callback called with searchTerm as param) */
  onType: PropTypes.func,
  /** The onFocus for the input (callback called when focusing the input) */
  onFocus: PropTypes.func,
  /** The onBlur for the input (callback called with blurring the input) */
  onBlur: PropTypes.func,
  /** When enter key is pressed to initiate the search */
  onSubmit: PropTypes.func,
  /** The search input value */
  value: PropTypes.string,
  /** Style prop */
  style: PropTypes.object
};
Search.defaultProps = {
  placeholder: "",
  onChange: function onChange() {},
  onSubmit: function onSubmit() {},
  searchKeys: [],
  options: [],
  autoFocus: false,
  className: "",
  hint: "",
  onType: function onType() {},
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  style: {}
};
Search.classNames = {
  $prefix: "Outermost element",
  "$prefix-icon": "Search Icon",
  "$prefix-input": "Search input",
  "$prefix-hint": "Search hint"
};
Search.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Search",
  "props": {
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The input placeholder"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Whenever you type, an onChange callback is triggered with the results"
    },
    "onSubmit": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "When enter key is pressed to initiate the search"
    },
    "searchKeys": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "array"
      },
      "required": false,
      "description": "Object keys to search when finding"
    },
    "options": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "array"
      },
      "required": false,
      "description": "The array of object to search"
    },
    "autoFocus": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether to auto focus or not"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to appended to the outermost element"
    },
    "hint": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The hint text that shows up inside the search input"
    },
    "onType": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "The onChange for the input (callback called with searchTerm as param)"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "The onFocus for the input (callback called when focusing the input)"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "The onBlur for the input (callback called with blurring the input)"
    },
    "style": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "Style prop"
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The prefix classname appended to all elements"
    },
    "value": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The search input value"
    }
  }
};

export default Search;
