"use strict";

exports.__esModule = true;
exports.SearchOrCustomFilter = void 0;
var _designSystem = require("@wix/design-system");
var _react = _interopRequireWildcard(require("react"));
var _SearchOrCustomFilterStCss = require("./SearchOrCustomFilter.st.css.js");
var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
var _mobxReactLite = require("mobx-react-lite");
var _useIsMobile = require("../../hooks/useIsMobile");
var _mobx = require("mobx");
var _toolbarResponsiveConstants = require("../../state/Toolbar/toolbarResponsiveConstants");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CollectionToolbar/SearchOrCustomFilter.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _SearchOrCustomFilter(props) {
  const {
    search: _search,
    state
  } = props;
  const {
    toolbar: {
      responsive
    }
  } = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
  const {
    search: searchResponsive,
    responsiveDisabled
  } = responsive;
  const isMobile = (0, _useIsMobile.useIsMobile)();
  const isSearchExpanded = state._searchExpanded;
  const {
    search,
    isExpandable
  } = (0, _react.useMemo)(() => {
    if (! /*#__PURE__*/(0, _react.isValidElement)(_search)) {
      return {
        search: _search,
        isExpandable: false
      };
    }
    const element = /*#__PURE__*/(0, _react.cloneElement)(_search, {
      onExpandTransitionStart: collapsed => {
        (0, _mobx.runInAction)(() => {
          if (!collapsed) {
            state._searchExpanded = true;
          }
        });
      },
      onExpandTransitionEnd: collapsed => {
        (0, _mobx.runInAction)(() => {
          if (collapsed) {
            state._searchExpanded = false;
          }
        });
      }
    });
    return {
      search: element,
      isExpandable: element.props.expandable
    };
  }, [_search]);
  if (responsiveDisabled || isMobile) {
    let child = search;
    if (isMobile) {
      child = /*#__PURE__*/_react.default.createElement(_react.Fragment, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 68,
          columnNumber: 9
        }
      }, isMobile && /*#__PURE__*/(0, _react.isValidElement)(_search) && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
        visibility: "hidden",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 70,
          columnNumber: 13
        }
      }, /*#__PURE__*/(0, _react.cloneElement)(_search, {
        dataHook: `collection-search-mobile-measurement`,
        // bypass stateful behavior on mobile for measurement
        value: '',
        onChange: () => {}
      })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
        className: (0, _SearchOrCustomFilterStCss.st)(_SearchOrCustomFilterStCss.classes.searchMobile, {
          expandable: isExpandable,
          expanded: isSearchExpanded
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 80,
          columnNumber: 11
        }
      }, search));
    }
    return /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
      className: (0, _SearchOrCustomFilterStCss.st)(isMobile ? undefined : _SearchOrCustomFilterStCss.classes.search),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 93,
        columnNumber: 7
      }
    }, child);
  }
  const shouldShrink = searchResponsive._shouldShrink;
  const width = shouldShrink ? _toolbarResponsiveConstants.SEARCH_COLLAPSED_WIDTH : _toolbarResponsiveConstants.SEARCH_EXPANDED_WIDTH;
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "horizontal",
    width: `${width}px`,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 104,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: `${width}px`,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 105,
      columnNumber: 7
    }
  }, search));
}
const SearchOrCustomFilter = exports.SearchOrCustomFilter = (0, _mobxReactLite.observer)(_SearchOrCustomFilter);
//# sourceMappingURL=SearchOrCustomFilter.js.map