"use strict";

exports.__esModule = true;
exports.TabsFilter = void 0;
var _react = _interopRequireWildcard(require("react"));
var _designSystem = require("@wix/design-system");
var _mobx = require("mobx");
var _FilterContext = require("../FilterContext");
var _mobxReactLite = require("mobx-react-lite");
var _TabTitle = require("./TabTitle");
var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
var _TabsFilterState = require("./TabsFilterState");
var _TabsFilterStCss = require("./TabsFilter.st.css.js");
var _TabsDropdown = require("./TabsDropdown");
var _types = require("./types");
var _TabsDefault = require("./TabsDefault");
var _useFilterValueTotalState = require("../TabTotal/useFilterValueTotalState");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/TabsFilter/TabsFilter.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); }
/** Type alias for TabTotalCounterBadge component element */

/** Type alias for TabTotalParens component element */

function _TabsFilter(props) {
  const {
    type,
    filter,
    data: dataProp,
    all,
    counterBadge,
    placeAllTabLast,
    onChange,
    mobilePopoverProps
  } = props;
  const {
    itemKey,
    itemName
  } = filter;
  const table = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
  const filterAllValueTotal = (0, _useFilterValueTotalState.useFilterValueTotalState)({
    ...props,
    value: undefined
  });
  const container = _react.default.useRef();
  const [state] = (0, _react.useState)(() => table.tabs ?? (table.tabs = new _TabsFilterState.TabsFilterState({
    table
  })));
  (0, _react.useLayoutEffect)(() => {
    (0, _mobx.runInAction)(() => {
      if (filter.persistent == null) {
        filter.persistent = true;
      }
    });
  }, []);
  const {
    responsive
  } = state;
  const isAllCounterBadgeLoading = (0, _react.useMemo)(() => {
    const allStatus = filterAllValueTotal.totalsCollection.initTask.status;
    const {
      isLoading,
      isIdle
    } = allStatus;
    return isLoading || isIdle;
  }, [filterAllValueTotal.totalsCollection.initTask.status]);
  const isTableLoading = (0, _react.useMemo)(() => {
    const {
      isLoading,
      isIdle
    } = table.initTask.status;
    return isLoading || isIdle;
  }, [table.initTask.status]);
  const hideCounterBadge = isTableLoading || isAllCounterBadgeLoading;
  const items = (0, _react.useMemo)(() => {
    const _mergedItems = dataProp.map((value, index) => {
      return {
        id: itemKey(value),
        name: itemName(value),
        title: /*#__PURE__*/_react.default.createElement(_TabTitle.TabTitle, {
          tabIndex: all && !placeAllTabLast ? index + 1 : index,
          state: responsive,
          text: itemName(value),
          value: value,
          counterBadge: hideCounterBadge ? undefined : counterBadge,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 140,
            columnNumber: 11
          }
        }),
        value
      };
    });
    if (!all) {
      return _mergedItems.map((item, index) => ({
        ...item,
        index,
        minWidth: responsive.itemsMinWidths[index],
        maxWidth: responsive.itemMaxWidth
      }));
    }
    const allTabItem = {
      id: _types.ALL_TAB_ITEM_ID,
      name: all,
      title: /*#__PURE__*/_react.default.createElement(_TabTitle.TabTitle, {
        tabIndex: 0,
        state: responsive,
        text: all,
        value: undefined,
        counterBadge: hideCounterBadge ? undefined : counterBadge,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 165,
          columnNumber: 9
        }
      })
    };
    return (placeAllTabLast ? [..._mergedItems, allTabItem] : [allTabItem, ..._mergedItems]).map((item, index) => ({
      ...item,
      minWidth: responsive.itemsMinWidths[index],
      index
    }));
  }, [dataProp, all, counterBadge, responsive.panelMinWidth, hideCounterBadge]);
  (0, _react.useEffect)(() => state.init({
    container: container.current,
    itemsCount: items.length
  }), []);
  const selectedId = filter.isEmpty ? _types.ALL_TAB_ITEM_ID : itemKey(filter.value[0]);
  return /*#__PURE__*/_react.default.createElement(_FilterContext.FilterContextProvider, {
    value: filter,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 200,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "collection-tabs-filter",
    className: (0, _TabsFilterStCss.st)(_TabsFilterStCss.classes.root),
    width: "100%",
    height: 60,
    direction: "vertical",
    verticalAlign: "middle",
    flexGrow: 1,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 201,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: node => {
      if (node) {
        container.current = node;
      }
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 210,
      columnNumber: 9
    }
  }, responsive.mode === 'tabs' ? /*#__PURE__*/_react.default.createElement(_TabsDefault.TabsDefault, {
    items: items,
    data: dataProp,
    filter: filter,
    selectedId: selectedId,
    state: state,
    onChange: onChange,
    type: type,
    all: all,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 218,
      columnNumber: 13
    }
  }) : /*#__PURE__*/_react.default.createElement(_TabsDropdown.TabsDropdown, {
    filter: filter,
    data: dataProp,
    items: items,
    selectedId: selectedId,
    popoverProps: mobilePopoverProps,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 229,
      columnNumber: 13
    }
  }))));
}
const TabsFilter = exports.TabsFilter = (0, _mobxReactLite.observer)(_TabsFilter);
TabsFilter.displayName = 'TabsFilter';
//# sourceMappingURL=TabsFilter.js.map