import defaultLibraryCover from 'src/assets/images/defaultLibraryCover.webp';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { ArticleError } from '../Article/components/ArticleError';
import { ContentWrapper } from '../components/ContentWrapper';
import useLibrariesTitle from '../hooks/useLibrariesTitle';
import { useLibraryWelcomeConfig } from '../hooks/useLibraryWelcomeConfig';

import { LibraryHomeCard } from './LibraryHomeCard';
import { LibraryHomeSkeleton } from './LibraryHomeSkeleton';

const Home = () => {
  const librariesTitle = useLibrariesTitle();
  const { t } = useLokaliseTranslation('libraries');
  const {
    data: config,
    isError,
    isLoading,
    refetch,
  } = useLibraryWelcomeConfig();

  if (isError) {
    return <ArticleError onRetry={refetch} />;
  }

  if (isLoading || !config) {
    return (
      <ContentWrapper>
        <LibraryHomeSkeleton />
      </ContentWrapper>
    );
  }

  const title = config.title?.trim() ? config.title : librariesTitle;

  const description = !config.description?.trim()
    ? t('welcome.default_message.web')
    : config.description;

  return (
    <ContentWrapper>
      <LibraryHomeCard
        defaultImageSrc={defaultLibraryCover}
        description={description}
        imageSrc={config.imageUrl ?? undefined}
        title={title}
      />
    </ContentWrapper>
  );
};

export default Home;