import { useCallback } from 'react';
import { TFunction, Trans } from 'react-i18next';

import { useTheme } from '@material-hu/mui/index';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { ScoreDifferenceDescriptionProps } from './types';
import { getTranslationKey } from './utils';

const ScoreDifferenceDescription = ({
  difference,
}: ScoreDifferenceDescriptionProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const theme = useTheme();

  const getDifferenceColor = useCallback((): string | undefined => {
    if (difference === 0) {
      return undefined;
    }

    return difference > 0
      ? theme.palette.new.text.feedback.success
      : theme.palette.new.text.feedback.error;
  }, [
    difference,
    theme.palette.new.text.feedback.success,
    theme.palette.new.text.feedback.error,
  ]);

  const translationKey = getTranslationKey(difference);
  const color = getDifferenceColor();
  const absolutePoints = Math.abs(difference);

  return (
    <Trans
      i18nKey={translationKey}
      t={t as TFunction}
      ns="people_experience"
      count={absolutePoints}
      values={{ points: absolutePoints }}
      components={{
        span: (
          <Typography
            component="span"
            fontSize="inherit"
            sx={{ color }}
          />
        ),
      }}
    />
  );
};

export default ScoreDifferenceDescription;
