import { Helmet } from 'react-helmet-async';

import Stack from '@material-hu/mui/Stack';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { FixedHeader, ItemsList } from '../../components';
import { useEmployeeLifecycleIds } from '../../hooks/useEmployeeLifecycleIds';
import { useFormatJourneySteps } from '../../hooks/useFormatJourneySteps';
import { useGetJourneySteps } from '../../hooks/useGetJourneySteps';
import { employeeLifecycleRoutes } from '../../routes';
import { getProcessPillStatus } from '../../utils';

const JourneySteps = () => {
  const { t } = useLokaliseTranslation(['employee_lifecycle', 'screens']);
  const HuGoThemeProvider = useHuGoTheme();
  const { journeyId } = useEmployeeLifecycleIds();

  // Get journey steps
  const { steps, isLoading, processName, processStatus } =
    useGetJourneySteps(journeyId);

  // Format journey steps
  const { availableSteps, notAvailableSteps } = useFormatJourneySteps({
    steps,
  });

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('screens:Onboardings'))}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          minHeight: '100%',
        }}
      >
        <FixedHeader
          title={processName}
          loading={isLoading}
          backRoute={employeeLifecycleRoutes.onboardings()}
          pill={{
            type: getProcessPillStatus(processStatus),
            label: t(`process_template.status.${processStatus?.toLowerCase()}`),
          }}
        />
        <Stack
          sx={{
            px: 3,
            py: 3,
            gap: 4,
            mx: 'auto',
            maxWidth: 'md',
            width: '100%',
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
          }}
        >
          <ItemsList
            title={t('journey_steps.available_section_title')}
            items={availableSteps}
            isLoading={isLoading}
          />
          <ItemsList
            title={t('journey_steps.not_available_steps_title')}
            description={t('journey_steps.not_available_steps')}
            items={notAvailableSteps}
            isLoading={isLoading}
            hideIfEmpty
            skeletonsLength={1}
          />
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default JourneySteps;
