import React from 'react';
import { Box, Text, Badge, Tag } from '@wix/design-system';
import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { SetupStepIcon } from './SetupStepIcon';
import { st, classes } from './SetupWidget.st.css.js';
/**
 * Aggregated group row (e.g. "Stores", "Bookings"). Collapsed: icon + title +
 * an "x/y" counter + chevron. Expanded: the children render indented below.
 * Completion / in-progress are derived from the children (mirrors
 * `AggregatedByGroupStep` in dashboard-setup). The toggle lives on the header
 * only, so clicking a child doesn't collapse the group.
 */
export const SetupStepGroup = ({ step, isMobile, expanded, isPrimary, onToggle, renderChild, }) => {
    const { translate: t } = useWixPatternsContainer();
    const children = step.steps ?? [];
    const total = children.length;
    const completed = children.filter((c) => c.status === 'completed').length;
    const allCompleted = total > 0 && completed === total;
    const anyInProgress = children.some((c) => c.status === 'in-progress');
    const isFocused = expanded || isPrimary;
    const Chevron = expanded ? ChevronUp : ChevronDown;
    const header = (React.createElement("div", { role: "button", tabIndex: 0, onClick: onToggle, onKeyDown: (event) => {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                onToggle();
            }
        }, style: { cursor: 'pointer' } },
        React.createElement(Box, { align: "space-between", verticalAlign: isMobile ? 'top' : 'middle', width: "100%", minHeight: "30px" },
            React.createElement(Box, { minHeight: "24px", verticalAlign: isMobile ? 'top' : 'middle' },
                React.createElement(SetupStepIcon, { status: allCompleted ? 'completed' : 'upcoming' }),
                React.createElement(Box, { paddingLeft: "SP2", direction: isMobile ? 'vertical' : 'horizontal', verticalAlign: isMobile ? 'top' : 'middle', gap: "SP1" },
                    React.createElement(Text, { dataHook: `setup-step-title-${step.id}`, size: "small", weight: isFocused ? 'bold' : 'thin' }, step.title),
                    anyInProgress && !allCompleted && (React.createElement(Box, { marginTop: isMobile ? undefined : '2px' },
                        React.createElement(Badge, { size: "tiny", skin: "urgent", type: "transparent" }, t('cairo.setupWidget.step.inProgress')))))),
            React.createElement(Box, { verticalAlign: "middle", gap: "SP1" },
                React.createElement(Tag, { id: `setup-step-counter-${step.id}`, skin: "neutral", removable: false, size: "small" }, t('cairo.setupWidget.aggregated.counter', { completed, total })),
                React.createElement(Box, { dataHook: `setup-step-chevron-${step.id}` },
                    React.createElement(Chevron, { width: "20", height: "20" }))))));
    const childList = expanded && (React.createElement(Box, { dataHook: `setup-step-children-${step.id}`, direction: "vertical", gap: isMobile ? 'SP3' : 'SP1', paddingLeft: isMobile ? 'SP4' : 'SP5', marginTop: isMobile ? 'SP3' : 'SP1' }, children.map((child) => (React.createElement(React.Fragment, { key: child.id }, renderChild(child))))));
    if (isMobile) {
        return (React.createElement("div", { "data-hook": `setup-step-${step.id}`, className: st(classes.card) },
            React.createElement(Box, { direction: "vertical", padding: "SP4" },
                header,
                childList)));
    }
    return (React.createElement("div", { "data-hook": `setup-step-${step.id}`, className: st(classes.row) },
        header,
        childList));
};
//# sourceMappingURL=SetupStepGroup.js.map