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

import { IconCheck, IconClipboardList } from '@material-hu/icons/tabler';

import { CardContainerProps as HuCardContainerProps } from '@material-hu/components/design-system/CardContainer/types';
import { ListItemProps as HuListItemProps } from '@material-hu/components/design-system/List/components/ListItem/types';

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

import { employeeLifecycleRoutes } from '../routes';
import { JourneyStep, JourneyStepsSections } from '../types';
import { getStepPillStatus } from '../utils';

import { useEmployeeLifecycleIds } from './useEmployeeLifecycleIds';

type UseFormatJourneyStepsProps = {
  steps: JourneyStepsSections;
};

export const useFormatJourneySteps = ({
  steps,
}: UseFormatJourneyStepsProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { formatDate } = useFormatDate();
  const { journeyId } = useEmployeeLifecycleIds();
  const navigate = useNavigate();

  const formatCardBadge = (step: JourneyStep) => {
    const isCompleted = step.status === 'COMPLETED';
    const isNotAvailable = step.status === 'NOT_AVAILABLE';

    let badge: HuCardContainerProps['badge'] | undefined = undefined;

    if (isNotAvailable && step.availableFrom) {
      badge = {
        type: 'warning',
        label: t('journey_steps.available_date_badge', {
          date: formatDate(step.availableFrom),
        }),
        hasIcon: false,
      };
    }

    if (!isCompleted && step.expiredTasks > 0) {
      badge = {
        type: 'error',
        label: t('journey_steps.expired_tasks', {
          count: step.expiredTasks,
        }),
        hasIcon: false,
      };
    }

    return badge;
  };

  const formatListItem = (
    step: JourneyStep,
    isNotAvailableStep = false,
  ): HuListItemProps => {
    const { id, title, status, totalTasks } = step;

    const isCompleted = status === 'COMPLETED';
    const hidePill = isNotAvailableStep || isCompleted;

    return {
      onClick: () => {
        navigate(employeeLifecycleRoutes.journeys.stepTasks(journeyId!, id));
      },
      disabled: isNotAvailableStep,
      avatar: {
        Icon: isCompleted ? IconCheck : IconClipboardList,
        color: isCompleted ? 'success' : 'default',
      },
      text: {
        title: title,
        description: t('tasks.total', { count: totalTasks }),
      },
      sidePill: hidePill
        ? undefined
        : {
            label: t(`journey_steps.pill_${step?.status.toLowerCase()}`),
            type: getStepPillStatus(status),
          },
    };
  };

  const availableSteps = useMemo(
    () =>
      steps.availableSteps.map(step => ({
        id: step.id,
        cardBadge: formatCardBadge(step),
        listItem: formatListItem(step),
      })),
    [steps.availableSteps],
  );

  const notAvailableSteps = useMemo(
    () =>
      steps.notAvailableSteps.map(step => ({
        id: step.id,
        cardBadge: formatCardBadge(step),
        listItem: formatListItem(step, true),
      })),
    [steps.notAvailableSteps],
  );

  return { availableSteps, notAvailableSteps };
};
