import { useNavigate } from 'react-router';

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

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

import { sessionsRoutes } from '../../../routes';

type TableStatesProps = {
  queryState: PaginatedQueryState;
  onRetry: () => void;
};

export const TableStates = ({ queryState, onRetry }: TableStatesProps) => {
  const { t } = useLokaliseTranslation('learning');
  const navigate = useNavigate();
  const { isError, isEmpty, isEmptySearch } = queryState;

  return (
    <>
      {isError && (
        <StateCard
          variant="warning"
          title={t('empty.error.title')}
          description={t('empty.error.description')}
          primaryAction={{
            label: t('general:retry'),
            onClick: () => onRetry(),
          }}
        />
      )}
      {(isEmpty || isEmptySearch) && (
        <StateCard
          title={
            isEmptySearch
              ? t('empty.sessions.search.title')
              : t('empty.sessions.new.title')
          }
          description={
            isEmptySearch
              ? t('empty.sessions.search.description')
              : t('empty.sessions.new.description')
          }
          primaryAction={{
            label: t('session.create'),
            onClick: () => navigate(sessionsRoutes.new()),
          }}
        />
      )}
    </>
  );
};
