import { useEffect } from 'react';

import type { AppPage } from '~/src/components/NextApp/types';

import { toDecodedItemPath } from '~/lib/router2/utils';
import { ItemTypes } from '~/lib/types';
import Box from '~/src/components/Box';
import Button from '~/src/components/Button';
import { useAppLoading } from '~/src/components/NextApp/lib/CoreUi';
import PageError from '~/src/components/PageError';
import PagePlaceholder from '~/src/components/PagePlaceholder';
import Text from '~/src/components/Text';
import useFetchItemByPath from '~/src/hooks/useFetchItemByPath';
import withAuthGuard from '~/src/lib/hocs/withAuthGuard';
import { useI18n, withI18n } from '~/src/lib/i18n';
import { useAppRouter } from '~/src/lib/router2';
import DraftAlbumPage from '~/src/views/AlbumPage/DraftAlbumPage';
import DraftCustomPage from '~/src/views/CustomPage/DraftCustomPage';
import { DraftPrereleasePage } from '~/src/views/PrereleasePage/DraftPrereleasePage';

const DraftItemAppPage: AppPage = () => {
  const query = useAppRouter().getQuery();
  const setIsAppLoading = useAppLoading();
  const itemPath = toDecodedItemPath(query);
  const { t } = useI18n();

  const { item, itemError, itemIsLoading } = useFetchItemByPath(itemPath);
  const isDraft = item && 'isDraft' in item ? item.isDraft : false;

  useEffect(() => {
    setIsAppLoading(itemIsLoading);
  }, [itemIsLoading, setIsAppLoading]);

  if (!item || !isDraft) {
    if (itemIsLoading || itemError) {
      return (
        <PagePlaceholder
          isLoading={itemIsLoading}
          error={itemError}
          toErrorText={({ status }) => {
            if (status === 404) {
              return t('app.errors.item');
            }
          }}
        />
      );
    }

    if (item && !isDraft)
      return (
        <Box coverParent centerContent flexBox flexColumn gap="2rem">
          <Text size="2.5rem" bold centered>
            {t('item.errors.pageNotDraft')}
          </Text>
          <Button href={item.pagePath} text={t('item.actions.goToLivePage')} />
        </Box>
      );

    return <PageError error={{ message: t('app.errors.item') }} />;
  }

  switch (item.type) {
    case ItemTypes.ALBUM:
      return <DraftAlbumPage albumId={item.id} />;
    case ItemTypes.CUSTOM_PAGE:
      return <DraftCustomPage customPageId={item.id} />;
    case ItemTypes.PRERELEASE:
      return <DraftPrereleasePage prerelease={item} />;
    default:
      return <PageError error={{ message: 'Unsupported page type' }} />;
  }
};

const DraftItemAppPageWithI18n = withI18n(withAuthGuard(DraftItemAppPage), [
  'item',
  'prerelease',
  'form',
]);

export default DraftItemAppPageWithI18n;