'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _debounce = require('lodash/debounce');

var _debounce2 = _interopRequireDefault(_debounce);

var _reactInstantsearchDom = require('react-instantsearch-dom');

var _Input = require('../../../../components/Input');

var _Input2 = _interopRequireDefault(_Input);

var _useReadmeApi = require('../../../../../core/hooks/useReadmeApi');

var _useReadmeApi2 = _interopRequireDefault(_useReadmeApi);

var _styleModule = require('./style.module.scss');

var _styleModule2 = _interopRequireDefault(_styleModule);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// Internals
var CustomSearchBox = function CustomSearchBox(_ref) {
  var currentRefinement = _ref.currentRefinement,
      isSearchStalled = _ref.isSearchStalled,
      refine = _ref.refine;

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

  var initRequest = (0, _useReadmeApi2.default)('https://metrics.readme.io')[2];
  // delay to improve performance
  var _onChange = (0, _debounce2.default)(function (value) {
    return refine(value);
  }, 300);

  var publishQueryToMetrics = function publishQueryToMetrics(search) {
    var readmeSubdomain = document.querySelector('meta[name=readme-subdomain]');

    if (readmeSubdomain && query !== search) {
      setQuery(search);
      initRequest({
        path: 'search',
        headers: { 'Content-Type': 'application/json' },
        method: 'POST',
        body: JSON.stringify({
          search: search,
          subdomain: readmeSubdomain.getAttribute('content')
        })
      });
    }
  };

  return _react2.default.createElement(
    'div',
    { className: _styleModule2.default.SearchBox },
    _react2.default.createElement(_Input2.default, {
      autoCapitalize: 'off',
      autoComplete: 'off',
      autoCorrect: 'off',
      autoFocus: true,
      className: _styleModule2.default['SearchBox-Input'],
      onBlur: function onBlur(e) {
        return publishQueryToMetrics(e.currentTarget.value);
      },
      onChange: function onChange(e) {
        return _onChange(e.currentTarget.value);
      },
      spellCheck: 'false',
      tabIndex: 0,
      type: 'search',
      value: currentRefinement
    }),
    !isSearchStalled && _react2.default.createElement('i', { className: [_styleModule2.default['SearchBox-Search'], 'fa fa-search'].join(' ') }),
    isSearchStalled && _react2.default.createElement('i', { className: _styleModule2.default['SearchBox-Spinner'] })
  );
};

// Style


// Components
// 3rd-party libs


var SearchBox = (0, _reactInstantsearchDom.connectSearchBox)(CustomSearchBox);

CustomSearchBox.propTypes = process.env.NODE_ENV !== "production" ? {
  currentRefinement: _propTypes2.default.string,
  // Algolia says this should be boolean, but sometimes it’s undefined
  isSearchStalled: _propTypes2.default.any,
  refine: _propTypes2.default.func
} : {};

exports.default = SearchBox;
module.exports = exports['default'];