import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useRef, useEffect, useState } from 'react';
import { useTranslation } from '@crystaldesign/diva-core';
import classnames from 'classnames';
import { jsx } from 'react/jsx-runtime';
import 'react-dynamic-multi-render';
import '@babel/runtime/helpers/asyncToGenerator';
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 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var wcConfiguratorSettingsSearch = "wcConfigurator-settings-Search-E9-UU";
var mobile = "mobile-rgzgc";
var tablet = "tablet-KFzjP";
var wcInScroller = "wcInScroller-85YS9";
var wcConfiguratorSettingsSearchExpanded = "wcConfigurator-settings-SearchExpanded-Jceqy";
var wcConfiguratorSettingsSearchMaxExpanded = "wcConfigurator-settings-SearchMaxExpanded-AGbgn";
var filterNotVisible = "filter-not-visible-Os1H1";
var css_248z = "/*SearchFilter*/\n\ninput.wcConfigurator-settings-Search-E9-UU {\n  width: 96px;\n  padding: 2px;\n  margin-right: 12px;\n  font-size: 14px;\n  line-height: 20.8px;\n  border-radius: var(--globalBorderRadius);\n  border: none;\n  float: right;\n  color: var(--secondaryColor);\n  transition: 0.35s ease;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n  transition: width 0.2s ease;\n  max-width: 240px;\n  cursor: text;\n  background: white;\n  opacity: 1;\n}\n\n.mobile-rgzgc.wcConfigurator-settings-Search-E9-UU {\n  font-size: 12px;\n}\n\n.tablet-KFzjP.wcConfigurator-settings-Search-E9-UU {\n  font-size: 15px;\n}\n\n.wcConfigurator-settings-Search-E9-UU.wcInScroller-85YS9.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcConfigurator-settings-Search-E9-UU.wcInScroller-85YS9.wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n  display: block;\n  line-height: 20.8px;\n  width: 100%;\n  max-width: 192px;\n  padding-left: 1.1em;\n}\n\n.wcConfigurator-settings-Search-E9-UU.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcConfigurator-settings-Search-E9-UU.wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n  width: 160px;\n  margin-right: 48px;\n  line-height: 27.2px;\n  font-size: 17px;\n}\n\n.wcConfigurator-settings-Search-E9-UU:focus {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.wcInScroller-85YS9.wcConfigurator-settings-Search-E9-UU.filter-not-visible-Os1H1 {\n  height: 25.6px;\n  display: block;\n  margin-right: 0px;\n}\n\n.mobile-rgzgc.wcInScroller-85YS9.wcConfigurator-settings-Search-E9-UU.filter-not-visible-Os1H1 {\n  height: 19px;\n}\n";
styleInject(css_248z);

var _excluded = ["isInScroller", "item", "doShowFilter"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Seachbar = function Seachbar(_ref) {
  var isInScroller = _ref.isInScroller,
    item = _ref.item,
    doShowFilter = _ref.doShowFilter,
    props = _objectWithoutProperties(_ref, _excluded);
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var filterFreeTextChanged = function filterFreeTextChanged(searchValue, paletteId) {
    if (searchValue !== '') {
      viewHandler.settingsState.onAllGroups(paletteId, false);
    } else {
      if (viewHandler.paletteViewHandler.isGroupFolded(item.id)) {
        viewHandler.settingsState.onAllGroups(paletteId, true);
      }
    }
    viewHandler.paletteViewHandler.onSearchTextChanged(searchValue, paletteId);
  };
  var searchElement = useRef(null);
  useEffect(function () {
    var palette = viewHandler.settingsState.itemPalettes.get(item.id);
    if ((palette === null || palette === void 0 ? void 0 : palette.configStepKey) === item.configStepKey) viewHandler.settingsState.updateItemPalette(palette.id, _objectSpread(_objectSpread({}, palette), {}, {
      htmlInputElement: searchElement.current
    }));
  }, [searchElement]);
  var _useState = useState(viewHandler.uiState.isInMobileView),
    _useState2 = _slicedToArray(_useState, 2),
    isDisabled = _useState2[0],
    setIsDisabled = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    didFocus = _useState4[0],
    setDidFocus = _useState4[1];
  return /*#__PURE__*/jsx("form", {
    autoComplete: "off",
    autoFocus: false,
    onSubmit: function onSubmit(e) {
      return e.preventDefault();
    },
    style: {
      height: 'fit-content',
      marginBottom: 0
    },
    children: /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({}, props), {}, {
      ref: searchElement,
      className: classnames(wcConfiguratorSettingsSearch, doShowFilter ? undefined : filterNotVisible, viewHandler.uiState.configSettingsIsExpanded ? wcConfiguratorSettingsSearchExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? wcConfiguratorSettingsSearchMaxExpanded : undefined, isInScroller ? wcInScroller : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
      autoComplete: 'off',
      value: item.searchText,
      onKeyUp: function onKeyUp(e) {
        return filterFreeTextChanged(e.target.value, item.id);
      },
      placeholder: t('configurator.QUICKFILTER'),
      type: "text",
      "data-test-id": "plannerSearchbar",
      onMouseDown: function onMouseDown(e) {
        return setIsDisabled(false);
      },
      onTouchStart: function onTouchStart(e) {
        setIsDisabled(false);
        setTimeout(function () {
          setDidFocus(true);
        }, 100);
      },
      onBlur: function onBlur() {
        if (didFocus) {
          setIsDisabled(viewHandler.uiState.isInMobileView);
          setDidFocus(false);
        }
      },
      disabled: isDisabled
    }))
  });
};
var Searchbar = observer(Seachbar);

export { Searchbar as default };
