import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import AudienceSkeleton from '@material-hu/components/composed-components/audience/AudienceSkeleton';
import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import Skeleton from '@material-hu/components/design-system/Skeleton';

import { ContentWrapper } from 'src/pages/dashboard/HuLibraries/components/ContentWrapper';

import { ArticleBreadcrumbs } from '../../Article/components/ArticleBreadcrumbs';

export const ArticleAudienceFormSkeleton = () => {
  const { spacing, palette } = useTheme();

  return (
    <Stack sx={{ flex: 1 }}>
      <TaskFocusHeader
        title=""
        loading
      />
      <ContentWrapper>
        <ArticleBreadcrumbs />
        <Stack
          sx={{
            flex: 1,
            gap: 2,
            py: 5,
            px: 2,
            width: '100%',
            maxWidth: 'lg',
            mx: 'auto',
          }}
        >
          <AudienceSkeleton />
        </Stack>
        <Stack
          component="footer"
          sx={{
            position: 'sticky',
            bottom: 0,
            zIndex: 2,
            height: spacing(10),
            width: '100%',
            backgroundColor: palette?.new.background.elements.grey,
            justifyContent: 'center',
          }}
        >
          <Stack
            sx={{
              gap: 2,
              p: 2,
              width: '100%',
              maxWidth: 'lg',
              mx: 'auto',
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Skeleton sx={{ width: 100, height: 40, borderRadius: 1 }} />
            <Skeleton
              sx={{ width: 100, height: 40, borderRadius: 1, ml: 'auto' }}
            />
          </Stack>
        </Stack>
      </ContentWrapper>
    </Stack>
  );
};