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

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

const ChartSkeleton = ({
  skeletonLength = '10%',
}: {
  skeletonLength?: string;
}) => {
  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
      <Skeleton
        width={120}
        height={11}
      />
      <Grid
        container
        columns={10}
        sx={{ position: 'relative' }}
      >
        <Skeleton
          width={skeletonLength}
          height={10}
          sx={{ position: 'absolute', top: 12, left: 0 }}
        />
        {Array.from({ length: 10 }).map((_, index) => (
          <Grid
            item
            xs={1}
            key={index}
            sx={{
              border: '1px solid',
              height: 35,
              borderColor: ({ palette }) => palette.border?.neutralDivider,
            }}
          />
        ))}
      </Grid>
    </Stack>
  );
};

export const AttendanceStatsSkeleton = () => {
  return (
    <Stack sx={{ flexDirection: 'row', gap: 2 }}>
      <CardContainer
        sx={{
          minHeight: 185,
          minWidth: 250,
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
          },
        }}
      >
        <Skeleton
          width="50%"
          height={24}
        />
        <Skeleton
          width="70%"
          height={60}
          sx={{ my: 'auto', mx: 'auto' }}
        />
      </CardContainer>
      <CardContainer
        sx={{
          minHeight: 185,
          minWidth: 250,
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
            gap: 1,
          },
        }}
      >
        <Skeleton
          width="50%"
          height={24}
        />
        <Skeleton
          variant="circular"
          width={85}
          height={85}
          sx={{ my: 'auto', mx: 'auto' }}
        />
        <Stack sx={{ flexDirection: 'row', gap: 1, justifyContent: 'center' }}>
          <Skeleton
            width="40%"
            height={10}
          />
          <Skeleton
            width="40%"
            height={10}
          />
        </Stack>
      </CardContainer>
      <CardContainer
        fullWidth
        sx={{
          minHeight: 165,
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            gap: 1,
            height: '100%',
          },
        }}
      >
        <Skeleton
          width="30%"
          height={24}
        />
        <Stack sx={{ gap: 0, my: 'auto' }}>
          <ChartSkeleton skeletonLength="45%" />
          <ChartSkeleton skeletonLength="65%" />
        </Stack>
      </CardContainer>
    </Stack>
  );
};