import { Box } from '@mui/material';

export interface LoadingMaskProps {
  size?: number;
  padding?: number;
  borderWidth?: number;
  borderRadius?: number;
  duration?: number;
  children: React.ReactNode;
}

export default function LoadingMask({
  size = 64,
  padding = undefined,
  borderWidth = undefined,
  borderRadius = undefined,
  duration = undefined,
  children,
}: LoadingMaskProps) {
  const finialSize = size;
  const finialRadius = borderRadius ?? finialSize / 8;
  const finialBorderWidth = borderWidth ?? finialSize / 32;
  const finialPadding = padding ?? finialSize * 0.35 - finialBorderWidth;
  const finialDuration = duration ?? 2.5;
  return (
    <Box
      sx={{
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: finialSize,
        height: finialSize,
        position: 'relative',
      }}>
      <Box
        sx={{
          pointerEvents: 'none',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: finialSize,
          height: finialSize,
          overflow: 'hidden',
          borderRadius: `${finialRadius}px`,
          backgroundColor: 'grey.200',
          '&::before,&::after': {
            content: '""',
            position: 'absolute',
            pointerEvents: 'none',
          },
          '&::after': {
            left: finialBorderWidth,
            right: finialBorderWidth,
            top: finialBorderWidth,
            bottom: finialBorderWidth,
            backgroundColor: 'background.default',
            borderRadius: `${finialRadius - finialBorderWidth}px`,
          },
          '&::before': {
            width: finialSize * 5,
            height: finialSize * 5,
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            background: ({ palette }) =>
              `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
            animation: `rotate ${finialDuration}s linear infinite`,
            '@keyframes rotate': {
              '0%': {
                transform: 'translate(-50%, -50%) rotate(0deg)',
              },
              '100%': {
                transform: 'translate(-50%, -50%) rotate(360deg)',
              },
            },
          },
        }}
      />
      <Box
        sx={{
          position: 'relative',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: finialSize - finialPadding - finialBorderWidth,
          height: finialSize - finialPadding - finialBorderWidth,

          animation: 'wait-bounce 1.6s infinite',
          transformOrigin: 'center bottom',
          '@keyframes wait-bounce': {
            '0%': { transform: 'scale(1) translateY(0)' },
            '20%': { transform: 'scale(1.03) translateY(-4px)' },
            '40%': { transform: 'scale(0.98) translateY(2px)' },
            '60%': { transform: 'scale(1.01) translateY(-2px)' },
            '80%': { transform: 'scale(0.99) translateY(1px)' },
            '100%': { transform: 'scale(1) translateY(0)' },
          },
        }}>
        {children}
      </Box>
    </Box>
  );
}
