import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject } from './index-bbdfb97a.js';
import { useTranslation } from '@crystaldesign/diva-core';
import { useState, useRef, useEffect } from 'react';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import 'mobx-react-lite';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/toConsumableArray';
import '@crystaldesign/diva-utils';
import 'mobx';
import '@crystaldesign/web-planner-logic';
import 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var wrapper = "wrapper-MPQ1D";
var searchText = "search-text-h7Q58";
var icon = "icon-yltss";
var css_248z = ".wrapper-MPQ1D {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n.search-text-h7Q58 {\n  width: 130px;\n  height: 30px;\n  line-height: 28px;\n  border-radius: 5px;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0;\n  background-color: #fff;\n  padding: 0 1.6rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: relative;\n  border: 0;\n}\n\n.icon-yltss {\n  width: 36px;\n  height: 36px;\n  background: center / contain no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2259%22 height%3D%2259%22 viewBox%3D%220 0 59 59%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M39.9163 41.38C40.3208 41.7844 40.9765 41.7844 41.3809 41.38C41.7854 40.9755 41.7854 40.3198 41.3809 39.9153L39.9163 41.38ZM36.851 27.5286C36.851 32.6767 32.6776 36.85 27.5296 36.85V38.9215C33.8216 38.9215 38.9224 33.8206 38.9224 27.5286H36.851ZM27.5296 36.85C22.3815 36.85 18.2081 32.6767 18.2081 27.5286H16.1367C16.1367 33.8206 21.2375 38.9215 27.5296 38.9215V36.85ZM18.2081 27.5286C18.2081 22.3805 22.3815 18.2072 27.5296 18.2072V16.1357C21.2375 16.1357 16.1367 21.2365 16.1367 27.5286H18.2081ZM27.5296 18.2072C32.6776 18.2072 36.851 22.3805 36.851 27.5286H38.9224C38.9224 21.2365 33.8216 16.1357 27.5296 16.1357V18.2072ZM41.3809 39.9153L35.5982 34.1325L34.1334 35.5972L39.9163 41.38L41.3809 39.9153Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  margin-left: 12px;\n  margin-right: 12px;\n}\n";
styleInject(css_248z);

var Search = function Search(_ref) {
  var _ref$searchState = _slicedToArray(_ref.searchState, 2),
    search = _ref$searchState[0],
    setSearch = _ref$searchState[1];
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var inputRef = useRef(null);
  useEffect(function () {
    if (value && value.length > 2) setSearch(value);else if ((search === null || search === void 0 ? void 0 : search.length) !== 0) {
      setSearch(undefined);
    }
  }, [value]);
  useEffect(function () {
    if (!(search !== null && search !== void 0 && search.length)) setValue('');
  }, [search]);
  return /*#__PURE__*/jsxs("div", {
    className: wrapper,
    children: [/*#__PURE__*/jsx("input", {
      ref: inputRef,
      onChange: function onChange(e) {
        return setValue(e.target.value);
      },
      type: 'text',
      value: value,
      className: searchText,
      placeholder: t('filter.global')
    }), /*#__PURE__*/jsx("div", {
      className: icon
    })]
  });
};

export { Search as default };
