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

import { ArticleBreadcrumbs } from '../Article/components/ArticleBreadcrumbs';
import ArticleInternalHeader from '../components/ArticleInternalHeader';
import { ContentWrapper } from '../components/ContentWrapper';
import { useArticleId } from '../hooks/useArticleId';
import { useGetArticle } from '../hooks/useGetArticle';

import { ArticleDateStats } from './components/ArticleDateStats';
import { ArticleMetrics } from './components/ArticleMetrics';
import { ArticleSegmentedStats } from './components/ArticleSegmentedStats';

const Report = () => {
  const { articleId } = useArticleId();
  const { data: article, isLoading } = useGetArticle(articleId);

  return (
    <Stack sx={{ flex: 1 }}>
      <ArticleInternalHeader
        article={article}
        loading={isLoading}
      />
      <ContentWrapper>
        <ArticleBreadcrumbs />
        <ArticleMetrics
          article={article}
          loading={isLoading}
        />
        <ArticleSegmentedStats
          article={article}
          loading={isLoading}
        />
        <ArticleDateStats />
      </ContentWrapper>
    </Stack>
  );
};

export default Report;