import { Trans } from 'react-i18next';

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

import { useAuth } from 'src/contexts/JWTContext';
import { canCreateAcknowledgements } from 'src/pages/dashboard/acknowledgements/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useCreateAcknowledgementDrawer } from '../hooks/useAcknowledgementDrawer';

export const AcknowledgementEmptyState = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { user, permissions } = useAuth();

  const canCreateAck = canCreateAcknowledgements(permissions);
  const hasPointsToGive =
    canCreateAck && (user?.acknowledgementsToGiveLeft ?? 0) > 0;

  const { openCreateAcknowledgementDrawer } = useCreateAcknowledgementDrawer();

  return (
    <StateCard
      title={t('empty_state_title')}
      description={
        <Trans
          ns="acknowledgements"
          i18nKey={`empty_state_description_${hasPointsToGive}`}
          components={{ br: <br /> }}
        />
      }
      {...(hasPointsToGive && {
        primaryAction: {
          label: t('give_acknowledgement'),
          onClick: () => openCreateAcknowledgementDrawer(),
        },
      })}
    />
  );
};