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 } from '../components';
import { useEmployeeLifecycleIds } from '../hooks/useEmployeeLifecycleIds';
import { useGetJourneyStep } from '../hooks/useGetJourneyStep';
import { employeeLifecycleRoutes } from '../routes';
import { getStepPillStatus } from '../utils';

import { StepHeaderInfo } from './components/StepHeaderInfo';
import { TaskTabs } from './components/Tabs';
import { TaskDetail } from './components/TaskDetail';

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

  // Get journey step
  const { step, isLoading } = useGetJourneyStep(journeyId, stepId);

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('screens:Onboardings'))}</title>
      </Helmet>
      <FixedHeader
        title={step?.title || ''}
        loading={isLoading}
        backRoute={employeeLifecycleRoutes.journeys.steps(journeyId!)}
        pill={
          step?.status && {
            type: getStepPillStatus(step.status),
            label: t(`journey_steps.pill_${step.status.toLowerCase()}`),
          }
        }
      />
      <Stack
        sx={{
          minHeight: '100%',
          width: '100%',
          backgroundColor: theme => theme.palette.new.background.layout.default,
        }}
      >
        <Stack
          sx={{
            px: 3,
            py: 3,
            gap: 4,
            mx: 'auto',
            maxWidth: 'md',
            width: '100%',
          }}
        >
          <StepHeaderInfo
            isLoading={isLoading}
            title={step?.title || ''}
            totalTasks={step?.totalTasks || 0}
            completedTasks={step?.completedTasks || 0}
          />
          <TaskTabs />
        </Stack>
      </Stack>
      <TaskDetail />
    </HuGoThemeProvider>
  );
};

export default JourneyTasks;