import './index.css';
import { jsx } from 'react/jsx-runtime';
import classnames from 'classnames';
import { createContext, useContext } from 'react';
import '@hh.ru/magritte-common-use-disabled';
import { Skeleton } from '@hh.ru/magritte-ui-skeleton';

const LoadingContext = createContext(false);
const useLoadingState = () => useContext(LoadingContext);

var styles = {"icon-skeleton-container":"magritte-icon-skeleton-container___nNxgI_14-2-6","iconSkeletonContainer":"magritte-icon-skeleton-container___nNxgI_14-2-6","icon-skeleton":"magritte-icon-skeleton___Kleh6_14-2-6","iconSkeleton":"magritte-icon-skeleton___Kleh6_14-2-6","icon-skeleton-size-16":"magritte-icon-skeleton-size-16___LoMy1_14-2-6","iconSkeletonSize16":"magritte-icon-skeleton-size-16___LoMy1_14-2-6","icon-skeleton-size-24":"magritte-icon-skeleton-size-24___-5duE_14-2-6","iconSkeletonSize24":"magritte-icon-skeleton-size-24___-5duE_14-2-6","icon-skeleton-size-32":"magritte-icon-skeleton-size-32___gYqII_14-2-6","iconSkeletonSize32":"magritte-icon-skeleton-size-32___gYqII_14-2-6"};

const STYLES_MAP = {
    16: styles.iconSkeletonSize16,
    24: styles.iconSkeletonSize24,
    32: styles.iconSkeletonSize32,
};
const getSkeletonProps = (iconProps, iconSize) => {
    const withWrapper = !!iconProps.backgroundStyle || !!iconProps.borderStyle;
    const borderRadius = iconProps.borderRadius === 'halfHeight' ? 9999 : iconProps.borderRadius;
    const size = iconSize + (withWrapper ? (iconProps.padding || 0) * 2 : 0);
    const additionalClass = !withWrapper ? classnames(STYLES_MAP[iconSize], styles.iconSkeleton) : undefined;
    return { withWrapper, borderRadius, size, additionalClass };
};
const SkeletonSize16 = (({ Icon, loading, ...iconProps }) => {
    const isLoading = useLoadingState() || loading;
    const { withWrapper, borderRadius, size, additionalClass } = getSkeletonProps(iconProps, 16);
    if (isLoading) {
        return (jsx("div", { className: classnames(styles.iconSkeletonContainer), style: { padding: !withWrapper ? iconProps.padding : undefined }, children: jsx(Skeleton, { loading: loading, additionalClass: additionalClass, width: size, height: size, borderRadius: withWrapper ? borderRadius : undefined }) }));
    }
    return jsx(Icon, { ...iconProps });
});
const SkeletonSize24 = (({ Icon, loading, ...iconProps }) => {
    const isLoading = useLoadingState() || loading;
    const { withWrapper, borderRadius, size, additionalClass } = getSkeletonProps(iconProps, 24);
    if (isLoading) {
        return (jsx("div", { className: classnames(styles.iconSkeletonContainer), style: { padding: !withWrapper ? iconProps.padding : undefined }, children: jsx(Skeleton, { loading: loading, additionalClass: additionalClass, width: size, height: size, borderRadius: withWrapper ? borderRadius : undefined }) }));
    }
    return jsx(Icon, { ...iconProps });
});
const SkeletonSize32 = (({ Icon, loading, ...iconProps }) => {
    const isLoading = useLoadingState() || loading;
    const { withWrapper, borderRadius, size, additionalClass } = getSkeletonProps(iconProps, 32);
    if (isLoading) {
        return (jsx("div", { className: classnames(styles.iconSkeletonContainer), style: { padding: !withWrapper ? iconProps.padding : undefined }, children: jsx(Skeleton, { loading: loading, additionalClass: additionalClass, width: size, height: size, borderRadius: withWrapper ? borderRadius : undefined }) }));
    }
    return jsx(Icon, { ...iconProps });
});
SkeletonSize16.isIcon = true;
SkeletonSize24.isIcon = true;
SkeletonSize32.isIcon = true;

export { SkeletonSize16, SkeletonSize24, SkeletonSize32 };
//# sourceMappingURL=Skeleton.js.map
