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

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

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

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

  if (isError || isNetworkError) {
    return (
      <StateCard
        variant="warning"
        title={t('empty.error.title')}
        description={t('empty.error.description')}
        primaryAction={{
          label: t('general:retry'),
          onClick: onRetry,
        }}
      />
    );
  }

  if (isEmpty || isEmptySearch) {
    const action = {
      label: t('settings.certificates.create'),
      onClick: onCreate,
    };
    return (
      <StateCard
        title={t(
          isEmptySearch
            ? 'general:empty_search_title'
            : 'settings.certificates.empty_state.title',
        )}
        description={t(
          isEmptySearch
            ? 'general:empty_search_description'
            : 'settings.certificates.empty_state.description',
        )}
        primaryAction={isEmptySearch ? undefined : action}
      />
    );
  }

  return null;
};
