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

const SCATTER_POINTS = [
  { left: '20%', top: '62%' },
  { left: '26%', top: '70%' },
  { left: '29%', top: '73%' },
  { left: '38%', top: '63%' },
  { left: '41%', top: '68%' },
  { left: '47%', top: '62%' },
  { left: '53%', top: '49%' },
  { left: '56%', top: '55%' },
  { left: '65%', top: '37%' },
  { left: '68%', top: '43%' },
  { left: '77%', top: '59%' },
  { left: '25%', top: '30%' },
  { left: '60%', top: '70%' },
  { left: '10%', top: '55%' },
  { left: '40%', top: '40%' },
]

export function ScatterplotSkeleton() {
  return (
    <Box sx={styles.skeleton.graph.container}>
      {SCATTER_POINTS.map((point, index) => (
        <Skeleton
          key={`skeleton-point-${index}`}
          variant='circular'
          width={12}
          height={12}
          sx={{
            position: 'absolute',
            top: point.top,
            left: point.left,
            transform: 'translate(-50%, -50%)',
          }}
        />
      ))}
      {/* Legend */}
      <Box sx={styles.skeleton.legend}>
        {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>
  )
}