import { Box, Skeleton, type SxProps, type Theme } from '@mui/material'

const styles = {
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'column',
    gap: ({ spacing }) => spacing(1),
    height: ({ spacing }) => spacing(38),
  },
  grid: {
    display: 'flex',
    justifyContent: 'space-between',
    flex: '1 1 auto',
    alignItems: 'flex-end',
    width: '100%',
  },
  bar: {
    flex: 1,
    maxWidth: ({ spacing }) => spacing(12),
    '& + &': {
      marginLeft: ({ spacing }) => spacing(1),
    },
  },
  legend: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(2),
    height: ({ spacing }) => spacing(5),
  },
  legendItem: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(1.5),
  },
} satisfies Record<string, SxProps<Theme>>

const BAR_HEIGHTS = ['20%', '40%', '60%', '20%', '80%'] as const

/**
 * Loading state for the Bar widget. Mirrors a bar chart's silhouette — five
 * vertical bars at staggered heights anchored to the bottom, plus a legend
 * stub — so the skeleton reads as "a bar chart" rather than a generic list.
 */
export function BarSkeleton() {
  return (
    <Box sx={styles.container}>
      <Box sx={styles.grid}>
        {BAR_HEIGHTS.map((height, i) => (
          <Skeleton
            key={`bar-${i}`}
            sx={styles.bar}
            variant='rectangular'
            height={height}
          />
        ))}
      </Box>
      <Box sx={styles.legend}>
        {[0, 1].map((i) => (
          <Box key={`legend-${i}`} sx={styles.legendItem}>
            <Skeleton variant='circular' width={8} height={8} />
            <Skeleton width={48} height={8} />
          </Box>
        ))}
      </Box>
    </Box>
  )
}