import { useMemo } from 'react';
import { useNavigate } from 'react-router';

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

import { employeeLifecycleRoutes } from '../routes';
import { Journey, JourneyListItemProps } from '../types';
import { getJourneyPillStatus } from '../utils';

export const useFormatJourneys = (journeys: Journey[]) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const navigate = useNavigate();

  const formatJourney = (journey: Journey): JourneyListItemProps => {
    const { id, progressStatus, processName, totalSteps } = journey;

    return {
      id,
      listItem: {
        onClick: () => navigate(employeeLifecycleRoutes.journeys.steps(id)),
        text: {
          title: processName,
          description: t('journeys.steps', { count: totalSteps || 0 }),
        },
        sidePill: {
          label: t(`journeys.progress_status.${progressStatus}`),
          type: getJourneyPillStatus(progressStatus),
        },
      },
    };
  };

  const formattedJourneys: JourneyListItemProps[] = useMemo(
    () => journeys.map(formatJourney),
    [journeys],
  );

  return { formattedJourneys };
};
