import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';

import { ACTION_COL_WIDTH, STATUS_COL_WIDTH } from './rowConstants';

const SKELETON_ROWS = 5;

const PerformanceLoading = () => (
  <Stack
    aria-busy
    sx={{ width: '100%' }}
  >
    {Array.from({ length: SKELETON_ROWS }).map((_, index) => (
      <HuCardContainer
        key={index}
        fullWidth
        padding={16}
        noHover
        sx={{ mb: 2 }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            flexWrap: 'wrap',
            gap: 1,
            rowGap: 1.5,
            width: '100%',
            minWidth: 0,
          }}
        >
          <Stack
            sx={{
              flex: '1 1 200px',
              minWidth: 0,
            }}
          >
            <HuSkeleton
              height={20}
              width="60%"
            />
          </Stack>
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'flex-end',
              width: STATUS_COL_WIDTH,
              flexShrink: 0,
            }}
          >
            <HuSkeleton
              height={24}
              width={104}
              sx={{ borderRadius: 999 }}
            />
          </Stack>
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'flex-end',
              width: ACTION_COL_WIDTH,
              flexShrink: 0,
            }}
          >
            <HuSkeleton
              height={28}
              width={140}
            />
          </Stack>
        </Stack>
      </HuCardContainer>
    ))}
  </Stack>
);

export default PerformanceLoading;