"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SetupWidgetSkeleton = void 0;
var _react = _interopRequireDefault(require("react"));
var _designSystem = require("@wix/design-system");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupWidgetSkeleton.tsx";
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
}) => /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
  direction: "vertical",
  width: "100%",
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 10,
    columnNumber: 3
  }
}, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonGroup, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 11,
    columnNumber: 5
  }
}, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
  width: width,
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 12,
    columnNumber: 7
  }
})));

/**
 * 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.
 */
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 ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP2",
    marginBottom: "SP3",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(Line, {
    width: "60%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: "35%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(Line, {
    width: "100%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(Line, {
    width: "100%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 7
    }
  })) :
  /*#__PURE__*/
  // 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.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    gap: "SP6",
    marginBottom: "SP4",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    flex: 1,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(Line, {
    width: "100%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    flex: 1,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(Line, {
    width: "100%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 9
    }
  })));
  const body = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "setup-widget-skeleton",
    direction: "vertical",
    width: "100%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59,
      columnNumber: 5
    }
  }, header, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: isMobile ? 'SP3' : 'SP1',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 63,
      columnNumber: 7
    }
  }, Array.from({
    length: SKELETON_ROW_COUNT
  }).map((_, index) => /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    key: index,
    width: "100%",
    padding: isMobile ? 'SP4' : 'SP1',
    minHeight: "30px",
    verticalAlign: "middle",
    border: "1px solid",
    borderColor: "D60",
    borderRadius: isMobile ? '8px' : '4px',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(Line, {
    width: "40%",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75,
      columnNumber: 13
    }
  })))));

  // Mobile renders bare (no outer card), matching the success layout.
  if (isMobile) {
    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      dataHook: dataHook,
      direction: "vertical",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 85,
        columnNumber: 7
      }
    }, body);
  }
  return /*#__PURE__*/_react.default.createElement(_designSystem.Card, {
    dataHook: dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    padding: "SP6",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 7
    }
  }, body));
};
exports.SetupWidgetSkeleton = SetupWidgetSkeleton;
//# sourceMappingURL=SetupWidgetSkeleton.js.map