"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ViewsDropdown = 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 _ViewsDropdownPrefix = require("./ViewsDropdownPrefix");
var _ = require("../..");
var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/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); }
function _ViewsDropdown({
  onSelect,
  dataHook,
  state,
  showTotal = true,
  dropdownWidth = '200px',
  ...dropdownProps
}) {
  const container = (0, _.useWixPatternsContainer)();
  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 viewsOptions = (0, _react.useMemo)(() => {
    const {
      viewsWithoutCategory,
      categories
    } = filteredCategoriesWithViews;
    return [...viewsWithoutCategory.map(view => (0, _viewsDropdownRenderHelpers.buildViewOption)({
      view,
      viewsState
    })), ...categories.flatMap(category => [(0, _viewsDropdownRenderHelpers.buildCategoryOption)({
      category,
      viewsState
    }), ...category.views.map(view => (0, _viewsDropdownRenderHelpers.buildViewOption)({
      view,
      viewsState
    }))])];
  }, [filteredCategoriesWithViews, container.initTask.status]);
  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: 65,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Loader, {
      size: "small",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 72,
        columnNumber: 13
      }
    }))
  } : {
    options: viewsOptions,
    fixedFooter: 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: 91,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: dropdownWidth,
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      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: dropdownWidth,
    popoverProps: {
      placement: 'bottom-start'
    }
  }, dropdownProps, {
    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(_ViewsDropdownPrefix.ViewsDropdownPrefix, {
      state: state,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 119,
        columnNumber: 19
      }
    }),
    suffix: shouldShowTotal ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      className: "total-count",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 122,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 123,
        columnNumber: 17
      }
    }, "(", 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: 93,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    paddingLeft: "SP2",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 147,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_ManageViewPopover.ManageViewPopover, {
    origin: "MainToolbar",
    state: state,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 148,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(_ViewsDropdownModals.ViewsDropdownModals, {
    state: state,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 151,
      columnNumber: 7
    }
  }));
}
const ViewsDropdown = exports.ViewsDropdown = (0, _mobxReactLite.observer)(_ViewsDropdown);
//# sourceMappingURL=ViewsDropdown.js.map