import React from 'react';
import { Box, Text, Button, TextButton, Badge, Tooltip, } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { SetupStepIcon } from './SetupStepIcon';
import { st, classes } from './SetupWidget.st.css.js';
/**
 * Mobile step card. Phase-1 layout ("matching desktop"): shadowed card, the
 * focused card gets a soft blue surface, an "In progress" badge sits under the
 * title, completed cards strike the title and drop the CTA. Story-only
 * experiment knobs (peach shell / colored bullet / hero art / full-screen
 * modal) are intentionally omitted — those are consumer/page concerns.
 */
export const SetupStepCard = ({ step, isPrimary, expanded, onActivate, renderStepContent, }) => {
    const { translate: t } = useWixPatternsContainer();
    const isInProgress = step.status === 'in-progress';
    const isCompleted = step.status === 'completed';
    const isDisabled = step.status === 'disabled';
    const isInline = step.expansionMode === 'inline';
    const isInlineExpanded = expanded && isInline;
    // The whole card toggles inline steps; navigate steps act via the CTA.
    const clickable = isInline && !isCompleted && !isDisabled;
    return (React.createElement("div", { "data-hook": `setup-step-${step.id}`, className: st(classes.card, { primary: isPrimary, clickable }), onClick: clickable ? onActivate : undefined, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: clickable
            ? (event) => {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    onActivate();
                }
            }
            : undefined },
        React.createElement(Box, { direction: "vertical", gap: "SP2", padding: "SP4" },
            React.createElement(Box, { gap: "SP2", verticalAlign: "top" },
                React.createElement(SetupStepIcon, { status: step.status }),
                React.createElement(Box, { direction: "vertical", gap: "SP1" },
                    React.createElement(Text, { dataHook: `setup-step-title-${step.id}`, size: "small", weight: isPrimary ? 'bold' : 'thin', skin: isDisabled ? 'disabled' : 'standard', secondary: isCompleted }, isCompleted ? React.createElement("del", null, step.title) : step.title),
                    isInProgress && (React.createElement(Box, null,
                        React.createElement(Badge, { size: "tiny", skin: "urgent", type: "transparent" }, t('cairo.setupWidget.step.inProgress')))))),
            !isCompleted && step.description && (React.createElement(Text, { size: "small", secondary: true }, step.description)),
            isInlineExpanded && (React.createElement(Box, { dataHook: `setup-step-content-${step.id}`, direction: "vertical" },
                React.createElement("div", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation() }, renderStepContent?.(step)))),
            !isCompleted &&
                !isInlineExpanded &&
                step.ctaLabel &&
                (() => {
                    const ctaButton = (React.createElement(Button, { dataHook: `setup-step-cta-${step.id}`, fullWidth: true, size: "medium", priority: isPrimary ? 'primary' : 'secondary', disabled: isDisabled, onClick: (event) => {
                            event.stopPropagation();
                            onActivate();
                        } }, step.ctaLabel));
                    // Disabled steps explain why the CTA is disabled (G5).
                    return isDisabled ? (React.createElement(Tooltip, { dataHook: `setup-step-disabled-tooltip-${step.id}`, content: step.disabledTooltip ??
                            // Translation-key id stays `lockedTooltip` until the
                            // Translation Center key is renamed (TC follow-up to T2).
                            t('cairo.setupWidget.step.lockedTooltip') },
                        React.createElement(Box, null, ctaButton))) : (ctaButton);
                })(),
            isCompleted && step.completedCtaLabel && !isDisabled && (React.createElement(Box, null,
                React.createElement(TextButton, { dataHook: `setup-step-cta-${step.id}`, size: "small", onClick: (event) => {
                        event.stopPropagation();
                        onActivate();
                    } }, step.completedCtaLabel))))));
};
//# sourceMappingURL=SetupStepCard.js.map