"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Kanban = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _ToolbarCollection = require("../ToolbarCollection");
var _mobxReactLite = require("mobx-react-lite");
var _Stage = require("./Stage");
var _designSystem = require("@wix/design-system");
var _CollectionCard = require("../CollectionCard");
var _KanbanCardDragAndDrop = require("../KanbanDragAndDropDndKit/KanbanCardDragAndDrop");
var _StagesSkeleton = require("./StagesSkeleton");
var _useKanbanCollectionSyncProps = require("./useKanbanCollectionSyncProps");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Kanban/Kanban.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 _Kanban(props) {
  const {
    state,
    dataHook
  } = props;
  const {
    toolbar,
    events
  } = state;
  const scrollToStage = ({
    stageKey
  }) => {
    const stageElement = document.querySelector(`[data-hook="kanban-stage-container-${stageKey}"]`);
    if (stageElement) {
      stageElement.scrollIntoView == null || stageElement.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center'
      });
    }
  };
  (0, _useKanbanCollectionSyncProps.useKanbanCollectionSyncProps)(props);
  (0, _react.useEffect)(() => {
    events.on('scrollToStage', scrollToStage);
    return () => {
      events.off('scrollToStage', scrollToStage);
    };
  }, [events]);
  const stages = (0, _react.useMemo)(() => {
    return props.state.stages;
  }, [props.state.stages]);

  // Calculate active stage key from activeId
  const activeId = state.dragAndDropState.activeId;
  const activeStageKey = activeId ? activeId.substring(0, activeId.indexOf('-##-')) || null : null;

  // Wrap with global drag and drop context - always enabled for Kanban
  const {
    KanbanDragAndDropContext,
    DragOverlay
  } = _KanbanCardDragAndDrop.KanbanCardDragAndDrop;

  // Find the index of the first DONE stage
  const firstDoneIndex = stages.findIndex(stage => {
    var _props$state;
    return ((_props$state = props.state) == null || _props$state.stageType == null ? void 0 : _props$state.stageType(stage)) === 'DONE';
  });
  const stagesContent = /*#__PURE__*/_react.default.createElement(KanbanDragAndDropContext, {
    state: state,
    stageId: "all",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "horizontal",
    gap: "12px",
    scrollbarWidth: "thin",
    scrollbarColor: "#CFD1DC transparent",
    overflowX: "scroll",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 7
    }
  }, stages.map((stage, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index === firstDoneIndex && firstDoneIndex !== -1 && /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    direction: "vertical",
    dataHook: "kanban-stages-done-divider",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75,
      columnNumber: 15
    }
  }), /*#__PURE__*/_react.default.createElement(_Stage.StageComponent, (0, _extends2.default)({
    dataHook: `kanban-stage-${props.state.stageKey(stage)}`,
    key: props.state.stageKey(stage),
    activeStageKey: activeStageKey,
    stageKey: props.state.stageKey(stage)
  }, props, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80,
      columnNumber: 13
    }
  }))))), /*#__PURE__*/_react.default.createElement(DragOverlay, {
    state: state,
    renderItem: props.renderItem,
    actionCell: props.actionCell,
    dataExtension: props.dataExtension,
    tags: props.tags,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90,
      columnNumber: 7
    }
  }));
  return /*#__PURE__*/_react.default.createElement(_CollectionCard.CollectionCard, {
    errorState: false,
    state: toolbar,
    dataHook: dataHook,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 101,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_ToolbarCollection.ToolbarCollection, {
    search: true,
    sticky: true,
    state: toolbar,
    filters: props.filters,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 102,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "kanban-tags-container",
    height: "0px",
    width: "0px",
    display: "hidden",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 104,
      columnNumber: 9
    }
  }, props.tags && props.tags), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "kanban-test",
    marginTop: "16px",
    marginBottom: "12px",
    marginLeft: "18px",
    marginRight: "18px",
    overflow: "auto",
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 112,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "kanban-stages",
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 11
    }
  }, props.state.isLoadingStages ? /*#__PURE__*/_react.default.createElement(_StagesSkeleton.StagesSkeleton, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 122,
      columnNumber: 44
    }
  }) : stagesContent))));
}
const Kanban = exports.Kanban = (0, _mobxReactLite.observer)(_Kanban);
//# sourceMappingURL=Kanban.js.map