"use strict";

exports.__esModule = true;
exports.ColumnsList = void 0;
var _mobxReactLite = require("mobx-react-lite");
var _react = _interopRequireWildcard(require("react"));
var _designSystem = require("@wix/design-system");
var _util = require("@wix/bex-core/util");
var _ColumnListTableListItem = require("./ColumnListTableListItem");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomColumnsPanel/ColumnsList.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 _ColumnsList(props) {
  const {
    state
  } = props;
  const {
    columnsCollection,
    dragAndDrop
  } = state;
  const hasSearchValue = state.searchValue.trim().length > 0;
  (0, _react.useEffect)(() => {
    if (dragAndDrop == null) {
      return;
    }
    const {
      table: {
        sidePanel
      }
    } = state;
    const disposers = [(0, _util.addEventListener)(sidePanel.transition.events, 'entered', () => {
      dragAndDrop.listRect._syncThrottled();
    }), dragAndDrop.listRect.init()];
    return () => {
      disposers.forEach(d => d == null ? void 0 : d());
    };
  }, []);
  const renderItem = (0, _react.useCallback)((column, index, {
    length
  }) => {
    const itemContent = /*#__PURE__*/_react.default.createElement(_ColumnListTableListItem.ColumnListTableListItem, {
      key: column.id,
      index: index,
      state: state,
      column: column,
      showDivider: index < length - 1,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 42,
        columnNumber: 9
      }
    });
    if (dragAndDrop && !hasSearchValue) {
      const {
        DraggableListItem
      } = dragAndDrop.components;
      return /*#__PURE__*/_react.default.createElement(DraggableListItem, {
        key: column.id,
        dndDisabled: column.reorderDisabled,
        id: column.id,
        index: index,
        state: dragAndDrop,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 55,
          columnNumber: 11
        }
      }, itemContent);
    }
    return itemContent;
  }, [hasSearchValue]);
  let child = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    dataHook: "custom-columns-list",
    backgroundColor: "D60",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73,
      columnNumber: 5
    }
  }, columnsCollection.result.items.map(renderItem));
  if (dragAndDrop && !hasSearchValue) {
    const {
      ListDragAndDropContext,
      DraggableListItemOverlay
    } = dragAndDrop.components;
    child = /*#__PURE__*/_react.default.createElement(ListDragAndDropContext, {
      state: dragAndDrop,
      onSubmit: async ({
        from,
        over
      }) => {
        var _state$dragAndDrop;
        state.customizeColumnsInSidePanelBi({
          actionName: 'reorder'
        });
        (_state$dragAndDrop = state.dragAndDrop) == null || _state$dragAndDrop._onCustomColumnsReorder(from.item.id, over.item.id);
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, /*#__PURE__*/_react.default.createElement(DraggableListItemOverlay, {
      state: dragAndDrop,
      renderItem: index => {
        const item = columnsCollection.result.items[index];
        return item ? renderItem(item, index, {
          length: 0
        }) : null;
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 100,
        columnNumber: 11
      }
    })));
  }
  return child;
}
const ColumnsList = exports.ColumnsList = (0, _mobxReactLite.observer)(_ColumnsList);
//# sourceMappingURL=ColumnsList.js.map