import { type FC } from 'react';
import { Helmet } from 'react-helmet-async';
import { useParams } from 'react-router-dom';

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

import CircularProgress from 'src/components/CircularProgress';

import useEditPosition from './hooks/useEditPosition';
import useGetPosition from './hooks/useGetPosition';
import PositionForm from './PositionForm';

export const EditPosition: FC = () => {
  const { t } = useLokaliseTranslation('settings');
  const NewThemeProvider = useNewTheme();
  const { id } = useParams();

  const positionId = Number(id);

  const { data: position, isLoading: loadingPosition } =
    useGetPosition(positionId);
  const updatePositionMutation = useEditPosition(positionId);

  return (
    <NewThemeProvider>
      <Helmet>
        <title>{formatTitle(t('GENERAL.POSITIONS_TAB.EDIT_POSITION'))}</title>
      </Helmet>
      {loadingPosition && (
        <CircularProgress
          centered
          size={28}
          sx={{ mt: 6 }}
        />
      )}
      {!loadingPosition && position && (
        <PositionForm
          title={t('GENERAL.POSITIONS_TAB.EDIT_POSITION')}
          submitLabel={t('GENERAL.SAVE_CHANGES')}
          onSubmit={updatePositionMutation.mutate}
          submitLoading={updatePositionMutation.isLoading}
          defaultValues={position}
        />
      )}
    </NewThemeProvider>
  );
};

export default EditPosition;