import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { CardContainer } from '../CardContainer';
import { useIsMobile } from '../../hooks/useIsMobile';
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
import { SetupWidgetHeader } from './SetupWidgetHeader';
import { SetupStepRow } from './SetupStepRow';
import { SetupStepCard } from './SetupStepCard';
import { SetupStepGroup } from './SetupStepGroup';
import { AllCompleteState } from './AllCompleteState';
import { SetupWidgetSkeleton } from './SetupWidgetSkeleton';
// Fires `onView` once when the wrapped step scrolls into view. Only mounted
// when the consumer passes `onStepView`, so view tracking adds no DOM/observer
// overhead otherwise.
const StepViewTracker = ({ stepId, onView, children, }) => {
    const { elementRef } = useIntersectionObserver(onView);
    return (React.createElement("div", { ref: elementRef, "data-hook": `setup-step-view-${stepId}` }, children));
};
const _SetupWidget = ({ state, renderStepContent, onStepClick, onCompletedStepClick, onStepView, onAllCompleteClick, renderError, dataHook, }) => {
    const { translate: t } = useWixPatternsContainer();
    const isMobile = useIsMobile();
    const { status } = state._loadTask.status;
    const activateStep = (step) => {
        // Completed steps fire their own action (never expand) — distinct from the
        // active/navigate `onStepClick`.
        if (step.status === 'completed') {
            onCompletedStepClick?.(step);
            return;
        }
        if (step.expansionMode === 'inline') {
            state._toggleStep(step.id);
        }
        else {
            onStepClick?.(step);
        }
    };
    // Children of an aggregated group are leaf steps — they never toggle/expand;
    // completed children fire the completed action, the rest navigate.
    const activateChild = (child) => {
        if (child.status === 'completed') {
            onCompletedStepClick?.(child);
        }
        else {
            onStepClick?.(child);
        }
    };
    const renderLeaf = (step, isChild = false) => {
        const expanded = !isChild &&
            step.expansionMode === 'inline' &&
            state._expandedStepId === step.id;
        const onActivate = () => isChild ? activateChild(step) : activateStep(step);
        return isMobile ? (React.createElement(SetupStepCard, { key: step.id, step: step, isPrimary: !isChild && step.id === state._primaryStepId, expanded: expanded, onActivate: onActivate, renderStepContent: renderStepContent })) : (React.createElement(SetupStepRow, { key: step.id, step: step, isFocused: !isChild && (step.id === state._primaryStepId || expanded), expanded: expanded, onActivate: onActivate, renderStepContent: renderStepContent }));
    };
    // All-complete is a distinct success surface with its own card.
    if (status === 'success' && state._isAllComplete) {
        return (React.createElement(AllCompleteState, { dataHook: dataHook, onCtaClick: onAllCompleteClick }));
    }
    // Built-in loading skeleton, shaped like the widget (desktop card / mobile
    // bare) so there's no layout jump when data resolves.
    if (status === 'idle' || status === 'loading') {
        return React.createElement(SetupWidgetSkeleton, { isMobile: isMobile, dataHook: dataHook });
    }
    // Consumer-supplied error UI fully replaces the default error card.
    if (status === 'error' && renderError) {
        return (React.createElement(React.Fragment, null, renderError({
            retry: () => state._retry(),
            error: state._loadTask.errorStatus?.error,
        })));
    }
    const header = (React.createElement(SetupWidgetHeader, { title: state._title, completedCount: state._completedCount, totalCount: state._totalCount, progressPercentage: state._progressPercentage, isMobile: isMobile }));
    const list = (React.createElement(Box, { direction: "vertical", gap: isMobile ? 'SP3' : 'SP1' }, state.steps.map((step) => {
        const node = step.steps?.length ? (React.createElement(SetupStepGroup, { step: step, isMobile: isMobile, expanded: state._expandedStepId === step.id, isPrimary: step.id === state._primaryStepId, onToggle: () => state._toggleStep(step.id), renderChild: (child) => renderLeaf(child, true) })) : (renderLeaf(step));
        return onStepView ? (React.createElement(StepViewTracker, { key: step.id, stepId: step.id, onView: () => onStepView(step) }, node)) : (React.createElement(React.Fragment, { key: step.id }, node));
    })));
    const body = (React.createElement(React.Fragment, null,
        header,
        list));
    // Mobile success renders bare — no outer card (matches the mobile design;
    // the consumer composes the surrounding page). Loading / error still flow
    // through CardContainer so the widget owns those states everywhere.
    if (isMobile && status === 'success') {
        return (React.createElement(Box, { dataHook: dataHook, direction: "vertical", gap: "SP3" }, body));
    }
    return (React.createElement(CardContainer, { dataHook: dataHook, status: status, errorState: {
            dataHook: 'error-state',
            title: t('cairo.setupWidget.error.title'),
            subtitle: t('cairo.setupWidget.error.subtitle'),
            action: {
                text: t('cairo.setupWidget.error.cta'),
                onClick: () => state._retry(),
            },
        } },
        React.createElement(Box, { direction: "vertical", padding: "SP6" }, body)));
};
export const SetupWidget = observer(_SetupWidget);
//# sourceMappingURL=SetupWidget.js.map