import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef } from 'react';
import { cx } from '../../../utils/index.js';
import { classes } from '../tokens.js';
import { StyledRectSkeleton } from './RectSkeleton.styles.js';
import { getSkeletonColor } from '../../../mixins/applySkeletonAnimation.js';
import { getRoundness } from '../../../mixins/applyRoundness.js';

var _excluded = ["width", "height", "lighter", "customGradientColor", "roundness", "animationType", "customFadeInColor", "customFadeOutColor", "className"];
/**
 * Компонент для создания прямоугольного плейсхолдера.
 */
var RectSkeleton = /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
  var width = _ref.width,
    height = _ref.height,
    lighter = _ref.lighter,
    customGradientColor = _ref.customGradientColor,
    _ref$roundness = _ref.roundness,
    roundness = _ref$roundness === void 0 ? '16' : _ref$roundness,
    _ref$animationType = _ref.animationType,
    animationType = _ref$animationType === void 0 ? 'shimmer' : _ref$animationType,
    customFadeInColor = _ref.customFadeInColor,
    customFadeOutColor = _ref.customFadeOutColor,
    className = _ref.className,
    rest = _objectWithoutProperties(_ref, _excluded);
  var animationClass = classes["".concat(animationType, "Animation")];
  var roundnessValue = getRoundness({
    roundness: roundness
  });
  var skeletonGradientColor = getSkeletonColor({
    lighter: lighter,
    customGradientColor: customGradientColor
  });
  return /*#__PURE__*/React__default.createElement(StyledRectSkeleton, _extends({
    ref: outerRootRef,
    className: cx(className, animationClass),
    roundness: roundnessValue,
    gradientColor: skeletonGradientColor,
    customFadeInColor: customFadeInColor,
    customFadeOutColor: customFadeOutColor,
    width: Number.isNaN(Number(width)) ? String(width) : "".concat(width, "px"),
    height: Number.isNaN(Number(height)) ? String(height) : "".concat(height, "px")
  }, rest));
});

export { RectSkeleton };
