import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default from 'react';
import cls from 'classnames';
import { privateTokens, tokens, classes } from '../tokens.js';
import { Wrapper } from './withSkeleton.styles.js';
import { getSkeletonColor } from '../../../mixins/applySkeletonAnimation.js';

var _excluded = ["skeleton", "animationConfig", "animationType", "className"];

/**
 * Делает компонент скелетоном - у него заменяется фоновый цвет,
 * добавляется градиент и текст становится на 100% прозрачным.
 */

var withSkeleton = function withSkeleton(Component) {
  return /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
    var _ref2, _animationConfig$type, _animationConfig$ligh;
    var skeleton = _ref.skeleton,
      animationConfig = _ref.animationConfig,
      animationType = _ref.animationType,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, _excluded);
    var effectiveType = (_ref2 = (_animationConfig$type = animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) !== null && _animationConfig$type !== void 0 ? _animationConfig$type : animationType) !== null && _ref2 !== void 0 ? _ref2 : 'shimmer';
    var effectiveLighter = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === 'shimmer' ? (_animationConfig$ligh = animationConfig.lighter) !== null && _animationConfig$ligh !== void 0 ? _animationConfig$ligh : true : true;
    var effectiveGradientColor = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === 'shimmer' ? animationConfig.customGradientColor : undefined;
    var effectiveFadeInColor = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === 'pulse' ? animationConfig.customFadeInColor : undefined;
    var effectiveFadeOutColor = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === 'pulse' ? animationConfig.customFadeOutColor : undefined;
    var animationClass = classes["".concat(effectiveType, "Animation")];
    var skeletonClass = skeleton ? 'apply-skeleton-gradient' : undefined;
    var skeletonGradientColor = getSkeletonColor({
      lighter: effectiveLighter,
      customGradientColor: effectiveGradientColor
    });
    var wrapperStyle = _defineProperty(_defineProperty(_defineProperty({}, privateTokens.lineSkeletonGradient, skeletonGradientColor), privateTokens.skeletonFadeInColor, effectiveFadeInColor || "var(".concat(tokens.fadeInColor, ")")), privateTokens.skeletonFadeOutColor, effectiveFadeOutColor || "var(".concat(tokens.fadeOutColor, ")"));
    var componentProps = _objectSpread2(_objectSpread2({}, props), {}, {
      ref: ref,
      className: cls(skeletonClass, animationClass, className)
    });
    return /*#__PURE__*/React__default.createElement(Wrapper, {
      style: wrapperStyle
    }, /*#__PURE__*/React__default.createElement(Component, componentProps));
  });
};

export { withSkeleton };
