import { Box, Skeleton } from '@mui/material'
import { styles } from './style'

const GUTTER = 32
const SIZE = 294 - GUTTER
const INNER_SIZE = SIZE - GUTTER

export function PieSkeleton() {
  return (
    <Box sx={styles.skeleton.graph.container}>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative',
        }}
      >
        <Skeleton variant='circular' width={SIZE} height={SIZE} />
        <Skeleton
          sx={{
            position: 'absolute',
            zIndex: 1,
          }}
          variant='circular'
          width={INNER_SIZE}
          height={INNER_SIZE}
        />
        <Box
          sx={{
            position: 'absolute',
            zIndex: 2,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: ({ spacing }) => spacing(1),
          }}
        >
          <Skeleton height={24} width={72} />
          <Skeleton height={8} width={48} />
        </Box>
      </Box>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: ({ spacing }) => spacing(2),
          height: ({ spacing }) => spacing(5),
        }}
      >
        {Array(2)
          .fill(0)
          .map((_, i) => (
            <Box
              key={`skeleton-${i}`}
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: ({ spacing }) => spacing(1.5),
              }}
            >
              <Skeleton variant='circular' width={8} height={8} />
              <Skeleton width={48} height={8} />
            </Box>
          ))}
      </Box>
    </Box>
  )
}