import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { darken, lighten, Skeleton as MuiSkeleton, Stack, useTheme, } from '@mui/material';
import { getBorderRadius } from '../../Skeleton/constants';
import AISpinner from '../AISpinner';
import { AI_ILLUMINATION_DURATION_S, aiIlluminationKeyframes, } from './constants';
const AISkeleton = ({ isLoading = true, variant = 'rounded', sx, ...skeletonProps }) => {
    const theme = useTheme();
    if (!isLoading)
        return _jsx(_Fragment, { children: skeletonProps.children });
    const isLight = theme.palette.mode === 'light';
    const token = theme.palette.new.background.elements.grey;
    const baseColor = isLight ? darken(token, 0.15) : lighten(token, 0.08);
    const iconColor = theme.palette.new.text.neutral.inverted;
    const borderRadius = getBorderRadius(variant, theme);
    return (_jsxs(Stack, { role: "status", "aria-label": "Loading", sx: {
            position: 'relative',
            width: 'fit-content',
            overflow: 'hidden',
            borderRadius,
        }, children: [_jsx(MuiSkeleton, { animation: false, variant: variant, sx: {
                    backgroundColor: baseColor,
                    borderRadius,
                    ...sx,
                }, ...skeletonProps }), _jsx(Stack, { "aria-hidden": true, sx: {
                    position: 'absolute',
                    inset: 0,
                    pointerEvents: 'none',
                    backgroundImage: 'linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%)',
                    animation: `${aiIlluminationKeyframes} ${AI_ILLUMINATION_DURATION_S}s ease-in-out infinite`,
                    '@media (prefers-reduced-motion: reduce)': {
                        animation: 'none',
                    },
                } }), _jsx(Stack, { "aria-hidden": true, sx: {
                    position: 'absolute',
                    inset: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                    pointerEvents: 'none',
                }, children: _jsx(AISpinner, { color: iconColor }) })] }));
};
export default AISkeleton;
