import { FormProvider } from 'react-hook-form';

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

import { ArticleError } from '../components/ArticleError';
import { ContentWrapper } from '../components/ContentWrapper';
import { useArticleId } from '../hooks/useArticleId';
import { useGetArticle } from '../hooks/useGetArticle';
import { useHeaderArticleForm } from '../hooks/useHeaderArticleForm';

import { ArticleBreadcrumbs } from './components/ArticleBreadcrumbs';
import { ArticleDetail } from './components/ArticleDetail';
import { ArticleDetailSkeleton } from './components/ArticleDetail/components/ArticleDetailSkeleton';
import { ArticleHeader } from './components/ArticleHeader';

const Article = () => {
  const { articleId } = useArticleId();

  const {
    data: article,
    isLoading: articleLoading,
    isError: articleError,
    refetch,
  } = useGetArticle(articleId);

  const form = useHeaderArticleForm(article);

  if (articleError) return <ArticleError onRetry={refetch} />;
  if (articleLoading || !article) return <ArticleDetailSkeleton />;

  return (
    <Stack sx={{ flex: 1 }}>
      <FormProvider {...form}>
        <ArticleHeader article={article} />
        <ContentWrapper>
          <ArticleBreadcrumbs />
          <ArticleDetail article={article} />
        </ContentWrapper>
      </FormProvider>
    </Stack>
  );
};

export default Article;