import React from 'react';
import { Card, Box, SkeletonGroup, SkeletonLine } from '@wix/design-system';
const SKELETON_ROW_COUNT = 4;
// Wrap in a full-width *vertical* Box: a flex column stretches the SkeletonGroup
// to the container width, so the SkeletonLine's `%` resolves against the row/card
// (a horizontal wrapper lets the group shrink to content, making lines narrow).
const Line = ({ width }) => (React.createElement(Box, { direction: "vertical", width: "100%" },
    React.createElement(SkeletonGroup, null,
        React.createElement(SkeletonLine, { width: width }))));
/**
 * Built-in loading skeleton shaped like the widget — a header (title +
 * progress bar) over a list of step-row placeholders. Mirrors the success
 * layout (card-wrapped on desktop, bare on mobile) so there's no layout jump
 * when the data resolves.
 */
export const SetupWidgetSkeleton = ({ isMobile, dataHook, }) => {
    // Header skeleton mirrors SetupWidgetHeader's layout so the progress-bar area
    // is reserved too (no jump when data resolves):
    // - Mobile: title, ratio text, then a full-width bar — all stacked.
    // - Desktop: title on the left; ratio + a 220px bar inline on the right.
    const header = isMobile ? (React.createElement(Box, { direction: "vertical", gap: "SP2", marginBottom: "SP3" },
        React.createElement(Line, { width: "60%" }),
        React.createElement(Box, { width: "35%" },
            React.createElement(Line, { width: "100%" })),
        React.createElement(Line, { width: "100%" }))) : (
    // No fixed widths: title and progress-bar lines each `flex={1}` (equal
    // share), and the `gap` guarantees space between them at any card width.
    React.createElement(Box, { verticalAlign: "middle", gap: "SP6", marginBottom: "SP4" },
        React.createElement(Box, { flex: 1 },
            React.createElement(Line, { width: "100%" })),
        React.createElement(Box, { flex: 1 },
            React.createElement(Line, { width: "100%" }))));
    const body = (React.createElement(Box, { dataHook: "setup-widget-skeleton", direction: "vertical", width: "100%" },
        header,
        React.createElement(Box, { direction: "vertical", gap: isMobile ? 'SP3' : 'SP1' }, Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (React.createElement(Box, { key: index, width: "100%", padding: isMobile ? 'SP4' : 'SP1', minHeight: "30px", verticalAlign: "middle", border: "1px solid", borderColor: "D60", borderRadius: isMobile ? '8px' : '4px' },
            React.createElement(Line, { width: "40%" })))))));
    // Mobile renders bare (no outer card), matching the success layout.
    if (isMobile) {
        return (React.createElement(Box, { dataHook: dataHook, direction: "vertical" }, body));
    }
    return (React.createElement(Card, { dataHook: dataHook },
        React.createElement(Box, { direction: "vertical", padding: "SP6" }, body)));
};
//# sourceMappingURL=SetupWidgetSkeleton.js.map