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

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

type LearningFormSkeletonProps = {
  isSessions?: boolean;
};

export const LearningFormSkeleton = ({
  isSessions = false,
}: LearningFormSkeletonProps) => {
  const commonContainerProps = {
    '& .MuiCardContent-root': {
      display: 'flex',
      flexDirection: 'column',
      gap: 0.5,
    },
  };
  return (
    <Container
      maxWidth="md"
      disableGutters
      sx={{ width: '100%', gap: 2, display: 'flex', flexDirection: 'column' }}
    >
      <CardContainer
        fullWidth
        sx={commonContainerProps}
      >
        <Skeleton sx={{ width: '20%', height: 22 }} />
        <Skeleton sx={{ width: '100%', height: 56 }} />
      </CardContainer>
      <CardContainer
        fullWidth
        sx={commonContainerProps}
      >
        <Skeleton sx={{ width: '15%', height: 22 }} />
        <Skeleton sx={{ width: '100%', height: 102 }} />
      </CardContainer>
      {isSessions && (
        <Stack sx={{ gap: 0.5, flexDirection: 'row', width: '100%' }}>
          {Array.from({ length: 3 }).map((_, index) => (
            <CardContainer
              key={index}
              sx={commonContainerProps}
            >
              <Skeleton sx={{ width: '40%', height: 24 }} />
              <Skeleton sx={{ width: '100%', height: 50 }} />
            </CardContainer>
          ))}
        </Stack>
      )}
      <CardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
          },
        }}
      >
        <Stack sx={{ gap: 0.5, width: '100%' }}>
          <Skeleton sx={{ width: '15%', height: 22, mb: 2 }} />
          <Skeleton sx={{ width: '50%', height: 22 }} />
          <Skeleton sx={{ width: '65%', height: 22 }} />
        </Stack>

        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            sx={{
              minWidth: 372,
              height: 186,
              mt: '38px',
              borderRadius: 2,
            }}
          />
          <Skeleton
            sx={{ width: 158, height: 36 }}
            variant="text"
          />
        </Stack>
      </CardContainer>
    </Container>
  );
};