import * as React from 'react';
import { AddItem, Box, CounterBadge, Text } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { CardComponent } from './Card';
import { KanbanCardDragAndDrop } from '../KanbanDragAndDropDndKit/KanbanCardDragAndDrop';
import { ItemActionsState } from '../../state';
import { useDroppable } from '@wix/wix-style-react-incubator/dnd-kit/core';
import { action } from 'mobx';
import { CardsSkeleton } from './CardsSkeleton';
import { useEffect } from 'react';
function _StageComponent({ dataHook, state, stageSummary, activeStageKey, stageKey, ...props }) {
    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;
    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?.({
                behavior: 'smooth',
                block: 'nearest',
                inline: 'nearest',
            });
        }
    };
    useEffect(() => {
        events.on('scrollToCardInStage', scrollToCardInStage);
        return () => {
            events.off('scrollToCardInStage', scrollToCardInStage);
        };
    }, [events, stageKey]);
    // Make the stage droppable
    const { isOver, setNodeRef: setDroppableRef } = 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 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?.({
                        stage: stageState.stage,
                        item: keyedItem.item,
                    }),
                    key: keyedItem.key,
                },
                actionCell: props.actionCell,
                state,
            };
        });
    }, [keyedItems, keyedItems.length]);
    const { DraggableCard } = KanbanCardDragAndDrop;
    const isInSearchMode = state.isInSearchMode();
    const isInFilterMode = state.isInFilterMode();
    const isStageLoading = stageState.isLoading;
    const isChangingFiltersValue = state.getIsChangingFiltersValue();
    const shouldShowStageSummary = !isChangingFiltersValue && !isStageLoading;
    return (React.createElement("div", { 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: action(() => {
                if (state.dragAndDropState.activeId) {
                    state.dragAndDropState.handleDragEnd({
                        over: { id: stageState.stageKey },
                        active: { id: state.dragAndDropState.activeId },
                    });
                }
            }),
        }) },
        React.createElement(Box, { width: "270px", direction: "vertical" },
            React.createElement("div", { "data-hook": dataHook },
                React.createElement(Box, { direction: "vertical", padding: "12px" },
                    React.createElement(Box, { marginBottom: "24px", direction: "vertical", padding: "0px 6px 0 6px", borderRadius: "8px" },
                        React.createElement(Box, null,
                            React.createElement(Box, { paddingRight: "6px", maxWidth: "190px" },
                                React.createElement(Text, { size: "small", weight: "bold", dataHook: `kanban-stage-title-${stageState.stageKey}`, ellipsis: true }, stageState.stageName)),
                            shouldShowStageSummary ? (React.createElement(CounterBadge, { dataHook: `kanban-stage-title-total-${stageState.stageKey}`, skin: "light", truncate: false }, stageState.totalItems)) : null),
                        React.createElement(Box, { gap: "0.2em" }, shouldShowStageSummary ? (React.createElement(Text, { size: "tiny", weight: "thin" }, stageSummary?.({ stage: stageState.stage }))) : null)),
                    shouldShowStageSummary && state.items.create?.title ? (React.createElement(Box, null,
                        React.createElement(AddItem, { size: "tiny", removePadding: true, dataHook: `kanban-stage-add-card-${stageState.stageKey}`, onClick: () => {
                                state.items.create?.navigateToEntityPage?.({
                                    stage: stageState.stage,
                                });
                                state.kanbanStateBIReporter.reportStageCTAClicked({
                                    ctaName: 'Add Card',
                                    ctaType: 'Primary Button',
                                    stageId: stageState.stageKey,
                                    stageIndex: state.getStageIndexByKey(stageState.stageKey),
                                    stageName: stageState.stageName,
                                });
                            } },
                            React.createElement(Box, { paddingTop: "9px", paddingBottom: "9px" }, state.items.create?.title)))) : null),
                state.isRefetching || isStageLoading || isChangingFiltersValue ? (React.createElement(CardsSkeleton, { stageKey: stageState.stageKey })) : (React.createElement(Box, { paddingBottom: "12px", direction: "vertical" },
                    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 },
                        (isInSearchMode || isInFilterMode) && items.length === 0 ? (React.createElement(Box, { flex: "1", verticalAlign: "middle", dataHook: `kanban-stage-no-results-${stageState.stageKey}` }, props.noResultsState)) : (items?.map((item) => (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,
                            } }, CardComponent)))),
                        stageState.itemsCollectionState.status.isLoading && (React.createElement("div", { className: "text-sm text-center text-gray-500" }, "Loading more...")))))))));
}
export const StageComponent = observer(_StageComponent);
//# sourceMappingURL=Stage.js.map