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

import ArticleInternalHeader from 'src/pages/dashboard/HuLibraries/components/ArticleInternalHeader';

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

import { ArticleAudienceForm } from './components/ArticleAudienceForm';
import { ArticleAudienceFormSkeleton } from './components/ArticleAudienceFormSkeleton';

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

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

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

  return (
    <Stack sx={{ flex: 1 }}>
      <ArticleInternalHeader article={article} />
      <ArticleAudienceForm article={article} />
    </Stack>
  );
};

export default Segmentation;