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

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

type TableStateProps = {
  state: PaginatedQueryStates;
  onRetry: () => void;
  onCreate: () => void;
};

const CategoriesTableState = ({
  state,
  onRetry,
  onCreate,
}: TableStateProps) => {
  const { t } = useLokaliseTranslation('learning');

  const cardPropsByState = {
    error: {
      variant: 'warning' as const,
      title: t('empty.error.title'),
      description: t('empty.error.description'),
      primaryAction: {
        label: t('general:retry'),
        onClick: onRetry,
      },
    },
    networkError: {
      variant: 'wifi-off' as const,
      title: t('empty.network.title'),
      description: t('empty.network.description'),
      primaryAction: {
        label: t('general:retry'),
        onClick: onRetry,
      },
    },
    empty: {
      title: t(`empty.categories.all.title`),
      description: t(`empty.categories.all.description`),
      primaryAction: {
        label: t('categories.create'),
        onClick: onCreate,
      },
    },
    emptySearch: {
      title: t('general:empty_search_title'),
      description: t('general:empty_search_description'),
    },
  };

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

  if (!cardProps) return null;

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

export default CategoriesTableState;
