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 }: { width: string }) => (
  <Box direction="vertical" width="100%">
    <SkeletonGroup>
      <SkeletonLine width={width} />
    </SkeletonGroup>
  </Box>
);

/**
 * 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,
}: {
  isMobile: boolean;
  dataHook?: string;
}) => {
  // 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 ? (
    <Box direction="vertical" gap="SP2" marginBottom="SP3">
      <Line width="60%" />
      <Box width="35%">
        <Line width="100%" />
      </Box>
      {/* progress bar */}
      <Line width="100%" />
    </Box>
  ) : (
    // No fixed widths: title and progress-bar lines each `flex={1}` (equal
    // share), and the `gap` guarantees space between them at any card width.
    <Box verticalAlign="middle" gap="SP6" marginBottom="SP4">
      {/* title */}
      <Box flex={1}>
        <Line width="100%" />
      </Box>
      {/* progress bar */}
      <Box flex={1}>
        <Line width="100%" />
      </Box>
    </Box>
  );

  const body = (
    <Box dataHook="setup-widget-skeleton" direction="vertical" width="100%">
      {header}

      {/* step rows */}
      <Box direction="vertical" gap={isMobile ? 'SP3' : 'SP1'}>
        {Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
          <Box
            key={index}
            width="100%"
            padding={isMobile ? 'SP4' : 'SP1'}
            minHeight="30px"
            verticalAlign="middle"
            border="1px solid"
            borderColor="D60"
            borderRadius={isMobile ? '8px' : '4px'}
          >
            <Line width="40%" />
          </Box>
        ))}
      </Box>
    </Box>
  );

  // Mobile renders bare (no outer card), matching the success layout.
  if (isMobile) {
    return (
      <Box dataHook={dataHook} direction="vertical">
        {body}
      </Box>
    );
  }

  return (
    <Card dataHook={dataHook}>
      <Box direction="vertical" padding="SP6">
        {body}
      </Box>
    </Card>
  );
};