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

export interface SuccessProps {
  size?: number;
  backgroundColor?: string;
  borderWidth?: number;
}

// FIXME: @zhanghan 目前无法适配各种 size，后续优化
export default function Success({ size = 64, backgroundColor = undefined, borderWidth = 4 }: SuccessProps) {
  const { palette } = useTheme();
  const contentSize = size - borderWidth * 2;
  const _backgroundColor = backgroundColor || palette.background.default;

  return (
    <Box
      className="check-icon"
      sx={{
        width: contentSize,
        height: contentSize,
        position: 'relative',
        borderRadius: '100%',
        '&, *, *::before, *::after': {
          boxSizing: 'content-box !important',
        },
        // 转圈边框的颜色
        border: (theme) => `${borderWidth}px solid ${theme.palette.success.light}`,
        '&::before, &::after': {
          content: '""',
          height: '125%',
          position: 'absolute',
          background: _backgroundColor,
          transform: 'rotate(-45deg)',
        },
        '&::before': {
          top: `${borderWidth / 2 + 1}px`,
          left: `-${borderWidth / 2}px`,
          width: `calc(32.5% + ${borderWidth}px)`,
          transformOrigin: '100% 50%',
          borderRadius: '100% 0 0 100%',
        },
        '&::after': {
          top: 0,
          left: '37.5%',
          width: `calc(70% + ${borderWidth}px)`,
          transformOrigin: '0 50%',
          borderRadius: '0 100% 100% 0',
          animation: 'rotate-circle 4.25s ease-in',
        },
        '.icon-line': {
          height: `${borderWidth + 1}px`,
          // 对勾的颜色
          backgroundColor: (theme) => theme.palette.success.light,
          display: 'block',
          borderRadius: '100vw',
          position: 'absolute',
          zIndex: 10,
        },
        '@keyframes rotate-circle': {
          '0%': {
            transform: 'rotate(-45deg)',
          },
          '5%': {
            transform: 'rotate(-45deg)',
          },
          '12%': {
            transform: 'rotate(-405deg)',
          },
          '100%': {
            transform: 'rotate(-405deg)',
          },
        },
      }}>
      <Box
        component="span"
        className="icon-line line-tip"
        sx={{
          top: '57.5%',
          left: '17.5%',
          width: '31.25%',
          transform: 'rotate(45deg)',
          animation: 'icon-line-tip 0.75s',
          '@keyframes icon-line-tip': {
            '0%': {
              width: '0',
              left: '1px',
              top: '23.75%',
            },
            '54%': {
              width: '0',
              left: '1px',
              top: '23.75%',
            },
            '70%': {
              width: '62.5%',
              left: '-10%',
              top: '46.25%',
            },
            '84%': {
              width: '21.25%',
              left: '26.25%',
              top: '60%',
            },
            '100%': {
              width: '31.25',
              left: '17.5%',
              top: '56.25%',
            },
          },
        }}
      />
      <Box
        component="span"
        className="icon-line line-long"
        sx={{
          top: '47.5%',
          right: '10%',
          width: '58.75%',
          transform: 'rotate(-45deg)',
          animation: 'icon-line-long 0.75s',
          '@keyframes icon-line-long': {
            '0%': {
              width: '0',
              right: '57.5%',
              top: '67.5%',
            },
            '65%': {
              width: '0',
              right: '57.5%',
              top: '67.5%',
            },
            '84%': {
              width: '68.75%',
              right: '0px',
              top: '43.75%',
            },
            '100%': {
              width: '58.75%',
              right: '10%',
              top: '47.5%',
            },
          },
        }}
      />
      <Box
        className="icon-circle"
        sx={{
          top: `-${borderWidth}px`,
          left: `-${borderWidth}px`,
          zIndex: 10,
          width: contentSize,
          height: contentSize,
          borderRadius: '100%',
          position: 'absolute',
          boxSizing: 'contentBox',
          // 圆环的颜色
          border: `${borderWidth}px solid rgba(76, 175, 80, 0.63)`,
        }}
      />
      <Box
        className="icon-fix"
        sx={{
          top: `calc(8% - ${Math.sqrt(borderWidth)}px)`,
          width: borderWidth + 1,
          left: `calc(32% - ${Math.sqrt(borderWidth)}px)`,
          zIndex: 1,
          height: contentSize + borderWidth * 2,
          position: 'absolute',
          transform: 'rotate(-45deg)',
          backgroundColor: _backgroundColor,
        }}
      />
    </Box>
  );
}
