import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';
import { useParams } from 'react-router';

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

import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

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

import { employeeLifecycleKeys } from '../../queries';
import { getProcessGeneralData } from '../../services';
import ProcessStepper from '../components/ProcessStepper';

const EditProcess = () => {
  const { processId } = useParams();
  const { t } = useLokaliseTranslation(['employee_lifecycle']);
  const HuGoThemeProvider = useHuGoTheme();

  const { data, isLoading } = useQuery({
    queryKey: employeeLifecycleKeys.process(processId || ''),
    queryFn: () => getProcessGeneralData(processId || ''),
    keepPreviousData: true,
  });

  const generalData = {
    id: processId || '',
    name: data?.name || '',
    description: data?.description || '',
    status: data?.status || 'DRAFT',
  };

  const title = t('employee_lifecycle:process_stepper.edit_process');

  if (isLoading) {
    return (
      <HuGoThemeProvider>
        <Stack
          sx={{
            height: '100vh',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Spinner centered />
        </Stack>
      </HuGoThemeProvider>
    );
  }

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>

      <ProcessStepper
        generalData={generalData}
        isNew={false}
      />
    </HuGoThemeProvider>
  );
};

export default EditProcess;