import React from "react";
import cls from "classnames";
import { getSkeletonColor } from "../../../mixins";
import { classes, privateTokens, tokens } from "../tokens";
import { Wrapper } from "./withSkeleton.styles";
/**
 * Делает компонент скелетоном - у него заменяется фоновый цвет,
 * добавляется градиент и текст становится на 100% прозрачным.
 */ export const withSkeleton = (Component)=>/*#__PURE__*/ React.forwardRef(({ skeleton, animationConfig, animationType, className, ...props }, ref)=>{
        const effectiveType = animationConfig?.type ?? animationType ?? 'shimmer';
        const effectiveLighter = animationConfig?.type === 'shimmer' ? animationConfig.lighter ?? true : true;
        const effectiveGradientColor = animationConfig?.type === 'shimmer' ? animationConfig.customGradientColor : undefined;
        const effectiveFadeInColor = animationConfig?.type === 'pulse' ? animationConfig.customFadeInColor : undefined;
        const effectiveFadeOutColor = animationConfig?.type === 'pulse' ? animationConfig.customFadeOutColor : undefined;
        const animationClass = classes[`${effectiveType}Animation`];
        const skeletonClass = skeleton ? 'apply-skeleton-gradient' : undefined;
        const skeletonGradientColor = getSkeletonColor({
            lighter: effectiveLighter,
            customGradientColor: effectiveGradientColor
        });
        const wrapperStyle = {
            [privateTokens.lineSkeletonGradient]: skeletonGradientColor,
            [privateTokens.skeletonFadeInColor]: effectiveFadeInColor || `var(${tokens.fadeInColor})`,
            [privateTokens.skeletonFadeOutColor]: effectiveFadeOutColor || `var(${tokens.fadeOutColor})`
        };
        const componentProps = {
            ...props,
            ref,
            className: cls(skeletonClass, animationClass, className)
        };
        return /*#__PURE__*/ React.createElement(Wrapper, {
            style: wrapperStyle
        }, /*#__PURE__*/ React.createElement(Component, componentProps));
    });
