import StateCard from '@material-hu/components/design-system/StateCard';

import { type PaginatedQueryStates } from 'src/hooks/usePaginatedQueryState';
import { useLokaliseTranslation } from 'src/utils/i18n';

type HistoryStateCardProps = {
  state: PaginatedQueryStates;
  hasPoints: boolean;
  onRetry: () => void;
  onShowCatalog: () => void;
};

export const HistoryStateCard = ({
  state,
  hasPoints,
  onRetry,
  onShowCatalog,
}: HistoryStateCardProps) => {
  const { t } = useLokaliseTranslation(['acknowledgements', 'general']);

  const cardPropsByState = {
    error: {
      variant: 'error' as const,
      title: t('general:error_title'),
      description: t('general:error_description'),
      primaryAction: { label: t('general:retry'), onClick: onRetry },
    },
    networkError: {
      variant: 'wifi-off' as const,
      title: t('general:network_error_title'),
      description: t('general:network_error_description'),
      primaryAction: { label: t('general:retry'), onClick: onRetry },
    },
    empty: {
      title: t('products.exchange_list_empty.title'),
      description: hasPoints
        ? t('products.exchange_list_empty_with_points.description')
        : t('products.exchange_list_empty.description'),
      ...(hasPoints && {
        primaryAction: {
          label: t('products.exchange_list_empty_with_points.action'),
          onClick: onShowCatalog,
        },
      }),
    },
  };

  const cardProps = cardPropsByState[state as keyof typeof cardPropsByState];

  if (!cardProps) return null;

  return <StateCard {...cardProps} />;
};

export default HistoryStateCard;
