"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.StageComponent = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _designSystem = require("@wix/design-system");
var _mobxReactLite = require("mobx-react-lite");
var _Card = require("./Card");
var _KanbanCardDragAndDrop = require("../KanbanDragAndDropDndKit/KanbanCardDragAndDrop");
var _state = require("../../state");
var _core = require("@wix/wix-style-react-incubator/dnd-kit/core");
var _mobx = require("mobx");
var _CardsSkeleton = require("./CardsSkeleton");
var _StageActions = require("./StageActions");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Kanban/Stage.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 _StageComponent({
  dataHook,
  state,
  stageSummary,
  activeStageKey,
  stageKey,
  stageActionCell,
  ...props
}) {
  var _state$items$create, _state$items$create3;
  const stageState = state.kanbanStageStates[stageKey];
  const {
    events
  } = state;
  const handleScroll = e => {
    const {
      scrollTop,
      scrollHeight,
      clientHeight
    } = e.currentTarget;
    if (scrollHeight - scrollTop <= clientHeight + 10 && !stageState.itemsCollectionState.fetchedLastPage && !stageState.itemsCollectionState.result.status.isFetching) {
      stageState.fetchMore();
    }
  };
  const {
    result: {
      keyedItems
    },
    status
  } = stageState.itemsCollectionState;
  (0, _react.useEffect)(() => {
    if (stageState.hasError) {
      stageState.showErrorToast(status.error);
    }
  }, [stageState.hasError]);
  const scrollToCardInStage = ({
    stageKey: _stageKey,
    cardKey
  }) => {
    if (stageKey !== stageState.stageKey) {
      return;
    }
    const cardElement = document.querySelector(`[data-hook="kanban-card-container-${_stageKey}-${cardKey}"]`);
    if (cardElement) {
      cardElement.scrollIntoView == null || cardElement.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'nearest'
      });
    }
  };
  (0, _react.useEffect)(() => {
    events.on('scrollToCardInStage', scrollToCardInStage);
    return () => {
      events.off('scrollToCardInStage', scrollToCardInStage);
    };
  }, [events, stageKey]);

  // Make the stage droppable
  const {
    isOver,
    setNodeRef: setDroppableRef
  } = (0, _core.useDroppable)({
    id: stageState.stageKey
  });

  // Check if this stage is the source stage (where drag originated)
  const isDndSourceStage = activeStageKey === stageState.stageKey;
  const items = React.useMemo(() => {
    return keyedItems.map((keyedItem, index) => {
      const itemActionsState = new _state.ItemActionsState({
        fade: 'static',
        keyedItem,
        collection: stageState.itemsCollectionState,
        reportBi: state.toolbar.reportBi
      });
      return {
        keyedItem,
        stageKey: stageState.stageKey,
        originalItem: keyedItem.item,
        itemIndex: index,
        itemActionsState,
        item: {
          ...(props.renderItem == null ? void 0 : props.renderItem({
            stage: stageState.stage,
            item: keyedItem.item
          })),
          key: keyedItem.key
        },
        actionCell: props.actionCell,
        state
      };
    });
  }, [keyedItems, keyedItems.length]);
  const {
    DraggableCard
  } = _KanbanCardDragAndDrop.KanbanCardDragAndDrop;
  const isInSearchMode = state.isInSearchMode();
  const isInFilterMode = state.isInFilterMode();
  const isStageLoading = stageState.isLoading;
  const isChangingFiltersValue = state.getIsChangingFiltersValue();
  const shouldShowStageSummary = !isChangingFiltersValue && !isStageLoading;
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
    ref: setDroppableRef,
    "data-hook": `kanban-stage-container-${stageState.stageKey}`,
    style: {
      width: '270px',
      backgroundColor: isOver && !isDndSourceStage ? '#D6E6FE' : '#F4F7FF',
      borderRadius: '8px',
      display: 'flex',
      flexDirection: 'column',
      border: isOver && !isDndSourceStage ? '1px dashed #80B1FF' : '1px solid transparent'
    }
  }, process.env.NODE_ENV === 'test' && {
    onPointerUp: (0, _mobx.action)(() => {
      if (state.dragAndDropState.activeId) {
        state.dragAndDropState.handleDragEnd({
          over: {
            id: stageState.stageKey
          },
          active: {
            id: state.dragAndDropState.activeId
          }
        });
      }
    })
  }, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 136,
      columnNumber: 5
    }
  }), /*#__PURE__*/React.createElement(_designSystem.Box, {
    width: "270px",
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 161,
      columnNumber: 7
    }
  }, /*#__PURE__*/React.createElement("div", {
    "data-hook": dataHook,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 162,
      columnNumber: 9
    }
  }, /*#__PURE__*/React.createElement(_designSystem.Box, {
    direction: "vertical",
    padding: "12px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 163,
      columnNumber: 11
    }
  }, /*#__PURE__*/React.createElement(_designSystem.Box, {
    marginBottom: "24px",
    direction: "vertical",
    padding: "0px 6px 0 6px",
    borderRadius: "8px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 164,
      columnNumber: 13
    }
  }, /*#__PURE__*/React.createElement(_designSystem.Box, {
    direction: "horizontal",
    align: "space-between",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 170,
      columnNumber: 15
    }
  }, /*#__PURE__*/React.createElement(_designSystem.Box, {
    gap: "SP1",
    maxWidth: "200px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 171,
      columnNumber: 17
    }
  }, /*#__PURE__*/React.createElement(_designSystem.Text, {
    ellipsis: true,
    size: "small",
    weight: "bold",
    dataHook: `kanban-stage-title-${stageState.stageKey}`,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 172,
      columnNumber: 19
    }
  }, stageState.stageName), shouldShowStageSummary && /*#__PURE__*/React.createElement(_designSystem.CounterBadge, {
    dataHook: `kanban-stage-title-total-${stageState.stageKey}`,
    skin: "light",
    truncate: false,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 182,
      columnNumber: 21
    }
  }, stageState.totalItems)), stageActionCell && /*#__PURE__*/React.createElement(_StageActions.StageActions, {
    state: state,
    stageKey: stageState.stageKey,
    stageActionCell: stageActionCell,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 193,
      columnNumber: 19
    }
  })), /*#__PURE__*/React.createElement(_designSystem.Box, {
    gap: "0.2em",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 201,
      columnNumber: 15
    }
  }, shouldShowStageSummary ? /*#__PURE__*/React.createElement(_designSystem.Text, {
    size: "tiny",
    weight: "thin",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 203,
      columnNumber: 19
    }
  }, stageSummary == null ? void 0 : stageSummary({
    stage: stageState.stage
  })) : null)), shouldShowStageSummary && (_state$items$create = state.items.create) != null && _state$items$create.title ? /*#__PURE__*/React.createElement(_designSystem.Box, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 210,
      columnNumber: 15
    }
  }, /*#__PURE__*/React.createElement(_designSystem.AddItem, {
    size: "tiny",
    removePadding: true,
    dataHook: `kanban-stage-add-card-${stageState.stageKey}`,
    onClick: () => {
      var _state$items$create2;
      (_state$items$create2 = state.items.create) == null || _state$items$create2.navigateToEntityPage == null || _state$items$create2.navigateToEntityPage({
        stage: stageState.stage
      });
      state.kanbanStateBIReporter.reportStageCTAClicked({
        ctaName: 'Add Card',
        ctaType: 'Primary Button',
        stageId: stageState.stageKey,
        stageIndex: state.getStageIndexByKey(stageState.stageKey),
        stageName: stageState.stageName
      });
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 211,
      columnNumber: 17
    }
  }, /*#__PURE__*/React.createElement(_designSystem.Box, {
    paddingTop: "9px",
    paddingBottom: "9px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 228,
      columnNumber: 19
    }
  }, (_state$items$create3 = state.items.create) == null ? void 0 : _state$items$create3.title))) : null), state.isRefetching || isStageLoading || isChangingFiltersValue ? /*#__PURE__*/React.createElement(_CardsSkeleton.CardsSkeleton, {
    stageKey: stageState.stageKey,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 236,
      columnNumber: 13
    }
  }) : /*#__PURE__*/React.createElement(_designSystem.Box, {
    paddingBottom: "12px",
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 238,
      columnNumber: 13
    }
  }, /*#__PURE__*/React.createElement("div", {
    "data-hook": `kanban-stage-cards-container-${stageState.stageKey}`,
    style: {
      overflow: 'auto',
      minHeight: '430px',
      height: 'calc(100vh - 420px)',
      display: 'flex',
      flexDirection: 'column',
      gap: '12px',
      alignItems: 'center',
      overflowX: 'hidden',
      scrollbarWidth: 'thin',
      scrollbarColor: '#CFD1DC transparent',
      paddingTop: '3px'
    },
    onScroll: handleScroll,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 239,
      columnNumber: 15
    }
  }, (isInSearchMode || isInFilterMode) && items.length === 0 ? /*#__PURE__*/React.createElement(_designSystem.Box, {
    flex: "1",
    verticalAlign: "middle",
    dataHook: `kanban-stage-no-results-${stageState.stageKey}`,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 257,
      columnNumber: 19
    }
  }, props.noResultsState) : items == null ? void 0 : items.map(item => /*#__PURE__*/React.createElement(DraggableCard, {
    key: `${item.stageKey}-##-${item.item.key}`,
    id: `${item.stageKey}-##-${item.item.key}`,
    state: state,
    cardProps: {
      keyedItem: item.keyedItem,
      originalItem: item.keyedItem.item,
      itemIndex: item.itemIndex,
      item: item.item,
      stageKey: item.stageKey,
      actionCell: item.actionCell,
      itemActionsState: item.itemActionsState,
      dataExtension: props.dataExtension,
      tags: props.tags,
      state
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 266,
      columnNumber: 21
    }
  }, _Card.CardComponent)), stageState.itemsCollectionState.status.isLoading && /*#__PURE__*/React.createElement("div", {
    className: "text-sm text-center text-gray-500",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 288,
      columnNumber: 19
    }
  }, "Loading more..."))))));
}
const StageComponent = exports.StageComponent = (0, _mobxReactLite.observer)(_StageComponent);
//# sourceMappingURL=Stage.js.map