"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ViewsDropdown = exports.VIEWS_REDESIGN_EXPERIMENT = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _ViewsDropdownModals = require("./ViewsDropdownModals");
var _ViewsDropdownStCss = require("./ViewsDropdown.st.css.js");
var _ManageViewPopover = require("./ManageViewPopover");
var _viewsDropdownRenderHelpers = require("./viewsDropdownRenderHelpers");
var _AutoCompleteReadonly = require("./AutoCompleteReadonly");
var _SaveToNewViewFooter = require("./SaveToNewViewFooter");
var _ViewsDropdownPrefix = require("./ViewsDropdownPrefix");
var _ = require("../..");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CollectionViewsDropdown/ViewsDropdown.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); }
const VIEWS_REDESIGN_EXPERIMENT = exports.VIEWS_REDESIGN_EXPERIMENT = 'specs.cairo.ViewsRedesign';
function _ViewsDropdown({
  onSelect,
  dataHook,
  state,
  showTotal = true,
  dropdownWidth = '200px',
  ...dropdownProps
}) {
  var _container$internalEx;
  const container = (0, _.useWixPatternsContainer)();
  const isRedesign = (_container$internalEx = container.internalExperiments) == null ? void 0 : _container$internalEx.enabled(VIEWS_REDESIGN_EXPERIMENT);
  const {
    views: viewsState
  } = state;
  const {
    currentView,
    collection,
    localSearchState
  } = viewsState;
  const {
    filteredCategoriesWithViews
  } = localSearchState;
  const {
    translate: t
  } = collection;
  const showLoader = collection.result.status.isIdle || collection.result.status.isLoading;
  const manageViewRef = (0, _react.useRef)(null);
  const viewsOptions = (0, _react.useMemo)(() => {
    const {
      viewsWithoutCategory,
      categories
    } = filteredCategoriesWithViews;
    const buildOption = view => {
      const isSelected = (currentView == null ? void 0 : currentView.id) === view.id;
      const option = (0, _viewsDropdownRenderHelpers.buildViewOption)({
        view,
        viewsState,
        suffix: isRedesign && isSelected ? /*#__PURE__*/_react.default.createElement(_ManageViewPopover.ManageViewPopover, {
          ref: manageViewRef,
          origin: "MainToolbar",
          state: state,
          redesign: true,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 68,
            columnNumber: 13
          }
        }) : undefined
      });
      return option;
    };
    return [...viewsWithoutCategory.map(buildOption), ...categories.flatMap(category => [...((0, _viewsDropdownRenderHelpers.getCategoryName)({
      category,
      viewsState
    }) ? [(0, _viewsDropdownRenderHelpers.buildCategoryOption)({
      category,
      viewsState
    })] : []), ...category.views.map(buildOption)])];
  }, [filteredCategoriesWithViews, container.initTask.status, currentView == null ? void 0 : currentView.id, isRedesign]);
  const {
    options,
    fixedFooter
  } = showLoader ? {
    options: [],
    fixedFooter: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      dataHook: "initial-loader",
      width: "100%",
      align: "center",
      verticalAlign: "middle",
      padding: "SP2",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 100,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Loader, {
      size: "small",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 107,
        columnNumber: 13
      }
    }))
  } : {
    options: viewsOptions,
    fixedFooter: isRedesign ? /*#__PURE__*/_react.default.createElement(_SaveToNewViewFooter.SaveToNewViewFooter, {
      state: state,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 114,
        columnNumber: 11
      }
    }) : undefined
  };
  const {
    table: {
      collection: mainCollection
    }
  } = state;
  const shouldShowTotal = showTotal && (mainCollection.totalStatus === 'success' || mainCollection.showRefreshLoader);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: dataHook,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 128,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: dropdownWidth,
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 129,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_AutoCompleteReadonly.AutoCompleteReadonly, (0, _extends2.default)({
    emptyStateMessage: !showLoader && t('cairo.viewsDropdown.nothingMatches.text'),
    state: state.views.autoCompleteReadonlyState,
    value: localSearchState.inputValue,
    onChange: e => localSearchState.setInputValueAndScheduleSearch(e.target.value),
    clearInput: () => localSearchState.clearSearch(),
    dropdownWidth: isRedesign ? '264px' : dropdownWidth,
    popoverProps: {
      placement: 'bottom-start'
    }
  }, dropdownProps, {
    onDrillIn: isRedesign ? option => {
      if (option.id === (currentView == null ? void 0 : currentView.id)) {
        var _manageViewRef$curren;
        (_manageViewRef$curren = manageViewRef.current) == null || _manageViewRef$curren.focusTrigger();
      }
    } : undefined,
    onInputClicked: e => {
      state.viewsStateBIReporter.clickOnViewDropdownBI();
      dropdownProps == null || dropdownProps.onInputClicked == null || dropdownProps.onInputClicked(e);
    },
    fixedFooter: fixedFooter,
    border: "round",
    selectedId: currentView == null ? void 0 : currentView.id,
    selectedLabel: currentView ? (0, _viewsDropdownRenderHelpers.getViewName)({
      view: currentView,
      viewsState
    }) : undefined,
    textOverflow: "ellipsis",
    prefix: /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": "views-dropdown-prefix",
      onClick: () => viewsState.autoCompleteReadonlyState.focusInput(),
      style: {
        cursor: 'pointer',
        display: 'inline-flex'
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 166,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_ViewsDropdownPrefix.ViewsDropdownPrefix, {
      state: state,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 171,
        columnNumber: 15
      }
    })),
    suffix: shouldShowTotal ? /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": "views-dropdown-suffix",
      onClick: () => viewsState.autoCompleteReadonlyState.focusInput(),
      style: {
        cursor: 'pointer',
        display: 'inline-flex'
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 176,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      className: "total-count",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 183,
        columnNumber: 17
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 184,
        columnNumber: 19
      }
    }, "(", state.table.collection.result.total, ")"))) : undefined,
    className: (0, _ViewsDropdownStCss.st)(_ViewsDropdownStCss.classes.root),
    dataHook: "collection-views-dropdown",
    onSelect: option => {
      viewsState.events.emit('beforeSelectView');
      const id = option.id.toString();
      const view = viewsState.getView(id);
      if (view) {
        onSelect == null || onSelect(view);
        viewsState.selectView({
          id
        });
        viewsState.events.emit('afterSelectView', {
          view
        });
      }
      localSearchState.clearSearch();
    },
    options: options,
    placeholder: t('cairo.viewDropdown.unsavedView.status'),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 130,
      columnNumber: 9
    }
  }))), !isRedesign && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    paddingLeft: "SP2",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 210,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_ManageViewPopover.ManageViewPopover, {
    origin: "MainToolbar",
    state: state,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 211,
      columnNumber: 11
    }
  })), /*#__PURE__*/_react.default.createElement(_ViewsDropdownModals.ViewsDropdownModals, {
    state: state,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 215,
      columnNumber: 7
    }
  }));
}
const ViewsDropdown = exports.ViewsDropdown = (0, _mobxReactLite.observer)(_ViewsDropdown);
//# sourceMappingURL=ViewsDropdown.js.map