import React, { useEffect, useMemo } from 'react';
import { ToolbarCollection } from '../ToolbarCollection';
import { observer } from 'mobx-react-lite';
import { StageComponent } from './Stage';
import { Box, Divider } from '@wix/design-system';
import { CollectionCard } from '../CollectionCard';
import { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';
import { StagesSkeleton } from './StagesSkeleton';
import { useKanbanCollectionSyncProps } from './useKanbanCollectionSyncProps';
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?.({
                behavior: 'smooth',
                block: 'nearest',
                inline: 'center',
            });
        }
    };
    useKanbanCollectionSyncProps(props);
    useEffect(() => {
        events.on('scrollToStage', scrollToStage);
        return () => {
            events.off('scrollToStage', scrollToStage);
        };
    }, [events]);
    const stages = 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;
    // Find the index of the first DONE stage
    const firstDoneIndex = stages.findIndex((stage) => props.state?.stageType?.(stage) === 'DONE');
    const stagesContent = (React.createElement(KanbanDragAndDropContext, { state: state, stageId: "all" },
        React.createElement(Box, { direction: "horizontal", gap: "12px", scrollbarWidth: "thin", scrollbarColor: "#CFD1DC transparent", overflowX: "scroll" }, stages.map((stage, index) => (React.createElement(React.Fragment, null,
            index === firstDoneIndex && firstDoneIndex !== -1 && (React.createElement(Divider, { direction: "vertical", dataHook: "kanban-stages-done-divider" })),
            React.createElement(StageComponent, { dataHook: `kanban-stage-${props.state.stageKey(stage)}`, key: props.state.stageKey(stage), activeStageKey: activeStageKey, stageKey: props.state.stageKey(stage), ...props }))))),
        React.createElement(DragOverlay, { state: state, renderItem: props.renderItem, actionCell: props.actionCell, dataExtension: props.dataExtension, tags: props.tags })));
    return (React.createElement(CollectionCard, { errorState: false, state: toolbar, dataHook: dataHook },
        React.createElement(ToolbarCollection, { search: true, sticky: true, state: toolbar },
            React.createElement(Box, { dataHook: "kanban-tags-container", height: "0px", width: "0px", display: "hidden" }, props.tags && props.tags),
            React.createElement(Box, { dataHook: "kanban-test", marginTop: "16px", marginBottom: "12px", marginLeft: "18px", marginRight: "18px", overflow: "auto", direction: "vertical" },
                React.createElement(Box, { dataHook: "kanban-stages", direction: "vertical" }, props.state.isLoadingStages ? React.createElement(StagesSkeleton, null) : stagesContent)))));
}
export const Kanban = observer(_Kanban);
//# sourceMappingURL=Kanban.js.map