import { useCallback, useMemo } from 'react';

import { type NpsSegmentType } from '@material-hu/components/composed-components/peopleExperience/surveyResults/types';

import { formatPercentage } from '../../../../../utils/formatting';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getTooltipLabels } from '../utils';

const useNpsChartTooltip = () => {
  const { t } = useLokaliseTranslation('people_experience');

  const tooltipLabels = useMemo(() => getTooltipLabels(t), [t]);

  const getTooltipTitle = useCallback(
    (key: NpsSegmentType, value: number) =>
      `${tooltipLabels[key]}: ${formatPercentage(value)}`,
    [tooltipLabels],
  );

  return { tooltipLabels, getTooltipTitle };
};

export default useNpsChartTooltip;
