import React from 'react';
import { Box, Text, Button, TextButton, Badge, Divider, Tooltip, } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { SetupStepIcon } from './SetupStepIcon';
import { st, classes } from './SetupWidget.st.css.js';
/**
 * Desktop step row. Recreated from the existing Setup widget:
 * - completed → green check, struck-through title, optional completed CTA
 * - disabled → muted bullet + disabled CTA (permission-denied)
 * - in-progress → "In progress" badge next to the title
 * - focused → blue surface, bold title, primary CTA
 * - hoverable rows tint blue on hover (handled in Stylable)
 */
export const SetupStepRow = ({ step, isFocused, expanded, onActivate, renderStepContent, }) => {
    const { translate: t } = useWixPatternsContainer();
    const isInProgress = step.status === 'in-progress';
    const isCompleted = step.status === 'completed';
    const isDisabled = step.status === 'disabled';
    const isInlineExpanded = expanded && step.expansionMode === 'inline';
    const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;
    // Completed steps stay actionable when they carry a completed CTA (G2).
    const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
    const clickable = (!isCompleted && !isDisabled) || showCompletedCta;
    const hoverable = !isFocused && !isCompleted && !isDisabled;
    const handleClick = clickable ? onActivate : undefined;
    return (React.createElement("div", { "data-hook": `setup-step-${step.id}`, className: st(classes.row, {
            focused: isFocused,
            hoverable,
            clickable,
        }), onClick: handleClick, onKeyDown: clickable
            ? (event) => {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    onActivate();
                }
            }
            : undefined, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined },
        React.createElement(Box, { align: "space-between", verticalAlign: "middle", width: "100%", minHeight: "30px" },
            React.createElement(Box, { minHeight: "24px", verticalAlign: "middle" },
                React.createElement(SetupStepIcon, { status: step.status }),
                React.createElement(Box, { paddingLeft: "SP2", paddingRight: "SP2", verticalAlign: "middle", gap: "SP1" },
                    React.createElement(Text, { dataHook: `setup-step-title-${step.id}`, size: "small", skin: isDisabled ? 'disabled' : 'standard', weight: isFocused ? 'bold' : 'thin', secondary: isCompleted, light: isCompleted }, isCompleted ? React.createElement("del", null, step.title) : step.title),
                    isInProgress && !isInlineExpanded && (React.createElement(Box, { marginTop: "2px" },
                        React.createElement(Badge, { size: "tiny", skin: "urgent", type: "transparent" }, t('cairo.setupWidget.step.inProgress')))))),
            showCta &&
                (() => {
                    const ctaNode = (React.createElement(Box, { verticalAlign: "middle" },
                        React.createElement(Button, { dataHook: `setup-step-cta-${step.id}`, size: "small", priority: !isDisabled && !isFocused ? 'secondary' : 'primary', disabled: isDisabled, ellipsis: false, 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') }, ctaNode)) : (ctaNode);
                })(),
            showCompletedCta && (React.createElement(Box, { verticalAlign: "middle", marginRight: "SP2", className: st(classes.completedCta) },
                React.createElement(TextButton, { dataHook: `setup-step-cta-${step.id}`, size: "small", onClick: (event) => {
                        event.stopPropagation();
                        onActivate();
                    } }, step.completedCtaLabel)))),
        isInlineExpanded && (React.createElement(Box, { dataHook: `setup-step-content-${step.id}`, direction: "vertical", paddingLeft: "SP5", paddingRight: "SP1", paddingBottom: "SP1", marginTop: "SP2" },
            React.createElement(Box, { marginBottom: "SP2" },
                React.createElement(Divider, null)),
            React.createElement("div", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation() }, renderStepContent?.(step))))));
};
//# sourceMappingURL=SetupStepRow.js.map