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); }
import React from "react";
import Skeleton from "./skeleton";
import Stack from "../stack/stack";
import { useTheme } from "../../../hooks/useTheme";
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.memo( /*#__PURE__*/React.forwardRef(({
  children,
  size,
  variant,
  colorScheme,
  startColor,
  endColor,
  fadeDuration,
  speed,
  spacing = "3",
  noOfLines = 3,
  isLoaded = false,
  skeletonHeight = 15,
  ...rest
}, ref) => {
  const {
    colorMode
  } = useTheme();
  const numbers = React.useMemo(() => range(noOfLines), [noOfLines]);
  const keyPrefix = React.useMemo(() => `${colorMode}-${Math.random()}`, [isLoaded, colorMode, startColor, endColor, speed, fadeDuration, speed, colorScheme, skeletonHeight, spacing, rest]);
  const getWidth = React.useCallback(index => {
    if (noOfLines > 1) {
      return index === numbers.length ? "80%" : "100%";
    }
    return "100%";
  }, [noOfLines, numbers.length]);
  return /*#__PURE__*/React.createElement(Stack, _extends({
    w: "100%",
    direction: "vertical",
    spacing: spacing
  }, rest, {
    ref: ref
  }), numbers.map((number, index) => {
    if (isLoaded && index > 0) {
      return null;
    }
    return /*#__PURE__*/React.createElement(Skeleton, {
      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";
export default SkeletonText;
//# sourceMappingURL=skeleton-text.js.map