"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _skeleton = _interopRequireDefault(require("./skeleton"));
var _stack = _interopRequireDefault(require("../stack/stack"));
var _useTheme = require("../../../hooks/useTheme");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function range(count) {
  return Array(count).fill(1).map((_, index) => index + 1);
}

/**
 * `SkeletonText` is used to display the loading state in the form of text.
 */
const SkeletonText = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  size,
  variant,
  colorScheme,
  startColor,
  endColor,
  fadeDuration,
  speed,
  spacing = "3",
  noOfLines = 3,
  isLoaded = false,
  skeletonHeight = 15,
  ...rest
}, ref) => {
  const {
    colorMode
  } = (0, _useTheme.useTheme)();
  const numbers = _react.default.useMemo(() => range(noOfLines), [noOfLines]);
  const keyPrefix = _react.default.useMemo(() => `${colorMode}-${Math.random()}`, [isLoaded, colorMode, startColor, endColor, speed, fadeDuration, speed, colorScheme, skeletonHeight, spacing, rest]);
  const getWidth = _react.default.useCallback(index => {
    if (noOfLines > 1) {
      return index === numbers.length ? "80%" : "100%";
    }
    return "100%";
  }, [noOfLines, numbers.length]);
  return /*#__PURE__*/_react.default.createElement(_stack.default, _extends({
    w: "100%",
    direction: "vertical",
    spacing: spacing
  }, rest, {
    ref: ref
  }), numbers.map((number, index) => {
    if (isLoaded && index > 0) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement(_skeleton.default, {
      key: `${keyPrefix}-${number}`,
      startColor: startColor,
      endColor: endColor,
      isLoaded: isLoaded,
      fadeDuration: fadeDuration,
      speed: speed,
      variant: variant,
      size: size,
      colorScheme: colorScheme,
      width: getWidth(index),
      height: skeletonHeight
    }, index === 0 ? children : undefined);
  }));
}));
SkeletonText.displayName = "SkeletonText";
var _default = exports.default = SkeletonText;
//# sourceMappingURL=skeleton-text.js.map