"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CollectionTable = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _designSystem = require("@wix/design-system");
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _CollectionCard = require("../CollectionCard");
var _useTableCollectionSyncProps = require("./useTableCollectionSyncProps");
var _CollectionTableWSRTable = require("./CollectionTableWSRTable");
var _CollectionTableContent = require("./CollectionTableContent");
var _PageInfiniteScrollLoader = require("../PageInfiniteScrollLoader");
var _ActionCell = require("../ActionCell");
var _BulkAction = require("../BulkAction");
var _useCreateWSRColumnBase = require("../../hooks/useCreateWSRColumnBase");
var _TablePlaceholderStates = require("../TablePlaceholderStates/TablePlaceholderStates");
var _providers = require("../../providers");
var _isValidElement = require("../isValidElement");
var _CollectionTableStCss = require("./CollectionTable.st.css.js");
var _useIsMobile = require("../../hooks/useIsMobile");
var _useCollectionTableResize = require("../../hooks/useCollectionTableResize");
var _SearchableCollectionContent = require("../SearchableCollectionContent/SearchableCollectionContent");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CollectionTable/CollectionTable.tsx";
function _CollectionTable(props) {
  var _state$container$inte;
  const {
    state: tableState,
    filters,
    title,
    tabs,
    customColumns: customColumnsProp,
    multiLevelSorting: multiLevelSortingProp,
    dataExtension,
    tags,
    views,
    extraToolbar,
    bulkActionToolbar,
    exportButton,
    exportModal,
    bulkActionModal,
    sticky: stickyProp,
    actionCell,
    actionCellWidth,
    actionCellProps,
    columns: columnsProp,
    onRowClick,
    onSortClick,
    showSelection: showSelectionProp,
    search,
    renderError,
    errorState = renderError && ((err, {
      isOnline,
      retry
    }) => renderError == null ? void 0 : renderError({
      err,
      isOnline,
      retry
    })),
    emptyState,
    noResultsState,
    children,
    onSelectedItems,
    cardProps,
    minCardHeight,
    dataHook,
    topNotification,
    tableGridSwitchButton,
    useShowLoaderWhenEmpty,
    useNewInfiniteScrollLoader,
    dragAndDrop,
    dragAndDropBulkSubmit,
    dragAndDropSubmit,
    dragAndDropCancel,
    dragAndDropReorderModeToolbar,
    horizontalScroll: horizontalScrollProp,
    stickyColumns,
    stickySelectionColumn,
    hideBulkSelectionCheckbox,
    maxSelection,
    showTitleBar = !tableState.toolbar.container.isPanelLayout,
    BodyElementType,
    isApplyColumnWidthStyle,
    rowVerticalPadding,
    keyedItems,
    resizeProps,
    ...rest
  } = props;
  const dataExtensionType = (0, _isValidElement.isValidElement)(dataExtension) ? dataExtension.type : dataExtension;
  const state = tableState.toolbar;
  const horizontalScroll = horizontalScrollProp ?? ((_state$container$inte = state.container.internalExperiments) == null ? void 0 : _state$container$inte.enabled('specs.cairo.HorizontalScrollAsDefault'));
  const {
    scrollableContentRef
  } = (0, _providers.useScrollableContentContext)();
  const sticky = stickyProp ?? (scrollableContentRef == null ? void 0 : scrollableContentRef.current) != null;
  const customColumns = props.customColumns || dataExtensionType && /*#__PURE__*/_react.default.createElement(dataExtensionType.CustomColumns, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 207,
      columnNumber: 27
    }
  });
  const isMobile = (0, _useIsMobile.useIsMobile)();
  const showSelection = isMobile ? bulkActionToolbar != null : showSelectionProp ?? bulkActionToolbar != null;
  const isVirtualized = !!BodyElementType;
  (0, _useTableCollectionSyncProps.useTableCollectionSyncProps)({
    ...props,
    dataExtension,
    showSelection,
    customColumns,
    tags,
    isUsingTableVirtualization: isVirtualized
  });
  const {
    collection,
    internalScroll
  } = state;
  const {
    selectedOrderedColumnsOrAll
  } = state;
  const {
    bulkSelect,
    query
  } = collection;
  const {
    isResizable,
    tableResizeProps,
    resizePlaceholderColumn
  } = (0, _useCollectionTableResize.useCollectionTableResize)({
    columns: columnsProp,
    userResizeProps: resizeProps,
    horizontalScroll,
    columnSizesState: state.columnSizesState,
    isVirtualized
  });
  const createWSRColumnBase = (0, _useCreateWSRColumnBase.useCreateWSRColumnBase)({
    horizontalScroll
  });
  const transformedColumns = selectedOrderedColumnsOrAll.map((column, index, {
    length
  }) => {
    const {
      render,
      id,
      sortable,
      infoTooltipProps,
      title,
      width,
      style,
      ...restColumn
    } = column;
    const columnBase = createWSRColumnBase(column, index, length);
    const resizeProps = isResizable ? {
      id: column.id
    } : undefined;
    return {
      ...restColumn,
      ...columnBase,
      resizeProps,
      ...(isApplyColumnWidthStyle ? undefined : {
        style,
        width
      }),
      sortDescending: sortable && id ? query.sort.getIsSortDescending(id) : undefined,
      render: (keyedItem, rowNum) => {
        const renderedContent = render(keyedItem.item, rowNum);
        return column.searchable ? /*#__PURE__*/_react.default.createElement(_SearchableCollectionContent.SearchableCollectionContent, {
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 270,
            columnNumber: 13
          }
        }, renderedContent) : renderedContent;
      }
    };
  });
  const actionCellColumn = (0, _ActionCell.useActionCellColumn)({
    actionCellProps: {
      ...(actionCellProps ?? {}),
      stickyActionCell: horizontalScroll || (actionCellProps == null ? void 0 : actionCellProps.stickyActionCell)
    },
    actionCellWidth,
    collection,
    sticky,
    actionCell
  });
  if (isResizable) {
    transformedColumns.push(resizePlaceholderColumn);
  }
  const columnsWithActions = actionCellColumn ? [...transformedColumns, actionCellColumn] : transformedColumns;
  const internalOnSortClick = (col, index) => {
    onSortClick == null || onSortClick(col, index);
    if (col.id != null) {
      state.collection.sort({
        id: col.id,
        sortMode: col.sortMode
      }, {
        clearResult: true,
        multiple: multiLevelSortingProp !== undefined
      });
    }
  };
  const {
    st: tableRowSt,
    classes: tableRowClasses
  } = _designSystem.Table.dataTableRowStyle;
  let table = /*#__PURE__*/_react.default.createElement(_CollectionTableWSRTable.CollectionTableWSRTable, (0, _extends2.default)({
    rowClass: (0, _CollectionTableStCss.st)(_CollectionTableStCss.classes.root, {
      mobile: isMobile
    })
  }, props, {
    topNotification: typeof topNotification === 'function' ? () => topNotification({
      query: collection.result.originQuery
    }) : topNotification,
    customColumns: customColumns,
    rowVerticalPadding: isMobile ? 'medium' : rowVerticalPadding,
    dragAndDropReorderModeToolbar: dragAndDropReorderModeToolbar,
    selectionToolbar: bulkActionToolbar && /*#__PURE__*/_react.default.createElement(_BulkAction.SingleCollectionBulkActionToolbar, {
      state: state,
      bulkActionToolbar: bulkActionToolbar,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 329,
        columnNumber: 11
      }
    }),
    dynamicRowClass: () => tableRowSt(tableRowClasses.root, {
      skin: 'light'
    }),
    horizontalScroll: horizontalScroll,
    resizable: isResizable,
    resizeProps: tableResizeProps,
    minCardHeight: minCardHeight,
    sticky: sticky,
    showTitleBar: showTitleBar,
    state: tableState,
    columns: columnsWithActions,
    onSortClick: internalOnSortClick,
    showSelection: showSelection,
    onSelectionChanged: (_selectedIds, _change) => {
      state.onSelectionChanged(_selectedIds, _change);
      onSelectedItems == null || onSelectedItems(bulkSelect.allSelected, bulkSelect.selectedValues);
      rest.onSelectionChanged == null || rest.onSelectionChanged(_selectedIds, _change);
    },
    selectionDisabled: row => state.bulk.isRowCheckboxDisabled(row),
    onRowClick: onRowClick && (({
      item
    }, index) => onRowClick(item, index)),
    isApplyColumnWidthStyle: isApplyColumnWidthStyle,
    keyedItems: keyedItems,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 316,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement(_TablePlaceholderStates.TablePlaceholderStates, {
    state: tableState,
    errorState: errorState,
    rowVerticalPadding: rowVerticalPadding,
    showTitleBar: showTitleBar,
    emptyState: emptyState,
    noResultsState: typeof noResultsState === 'function' ? () => {
      const {
        result: {
          originQuery,
          hasAvailableItems
        }
      } = collection;
      return noResultsState({
        hasAvailableItems,
        query: originQuery
      });
    } : noResultsState,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 360,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_CollectionTableContent.CollectionTableContent, {
    state: tableState,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 381,
      columnNumber: 7
    }
  }, useNewInfiniteScrollLoader || internalScroll ? /*#__PURE__*/_react.default.createElement(_PageInfiniteScrollLoader.PageInfiniteScrollLoader, {
    dataHook: "infinite-scroll-loader",
    state: collection,
    scrollMoreAlways: true,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 383,
      columnNumber: 11
    }
  }) : undefined, children));
  if (dragAndDrop) {
    const {
      TableDragAndDropContext
    } = dragAndDrop;
    table = /*#__PURE__*/_react.default.createElement(TableDragAndDropContext, {
      state: state,
      onSubmit: dragAndDropSubmit,
      onBulkSubmit: dragAndDropBulkSubmit,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 397,
        columnNumber: 7
      }
    }, table);
  }
  return /*#__PURE__*/_react.default.createElement(_CollectionCard.CollectionCard, (0, _extends2.default)({
    errorState: errorState,
    state: state,
    dataHook: dataHook,
    dataExtension: dataExtensionType,
    tags: tags
  }, cardProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 408,
      columnNumber: 5
    }
  }), exportModal ?? state.featuredComponents.exportModal.value, bulkActionModal && /*#__PURE__*/_react.default.createElement(_BulkAction.SingleCollectionBulkActionModal, {
    state: state,
    bulkActionModal: bulkActionModal,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 418,
      columnNumber: 9
    }
  }), table);
}
const CollectionTable = exports.CollectionTable = (0, _mobxReactLite.observer)(_CollectionTable);
//# sourceMappingURL=CollectionTable.js.map