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

import Image from '@material-hu/components/composed-components/Image';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import List from '@material-hu/components/design-system/List';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import Skeleton from '@material-hu/components/design-system/Skeleton';

import { ArticleBreadcrumbs } from './ArticleBreadcrumbs';

const CHILDREN_SKELETON_COUNT = 3;

export const ArticleSkeleton = () => {
  return (
    <Stack
      sx={{
        flex: 1,
        overflow: 'auto',
        '& header': { position: 'sticky', top: 0, zIndex: 1 },
      }}
    >
      <TaskFocusHeader
        title=""
        loading
      />
      <Stack
        sx={{
          gap: 2,
          py: 5,
          px: 2,
          width: '100%',
          maxWidth: 'lg',
          mx: 'auto',
        }}
      >
        <ArticleBreadcrumbs />
        <Image
          loading
          aspectRatio="4/1"
        />
        <CardContainer fullWidth>
          <Skeleton
            width="100%"
            height={100}
          />
        </CardContainer>
        <CardContainer fullWidth>
          <Skeleton
            variant="text"
            height={24}
            width={100}
          />
          <List>
            {Array.from({ length: CHILDREN_SKELETON_COUNT }, (_, index) => (
              <ListItem
                key={index}
                loading
              />
            ))}
          </List>
        </CardContainer>
      </Stack>
    </Stack>
  );
};
