import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useSearchParams } from 'react-router-dom';

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

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

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

import UploadFileAudienceStep from './components/UploadFileAudienceStep';
import UploadFileFooter from './components/UploadFileFooter';
import UploadFileHeader from './components/UploadFileHeader';
import UploadFileStep from './components/UploadFileStep';
import { UPLOAD_DEFAULT_VALUES } from './constants';
import { type UploadFormValues, UploadStep } from './types';

const UploadFile = () => {
  const { t } = useLokaliseTranslation('agents');
  const HuGoThemeProvider = useHuGoTheme();
  const [searchParams] = useSearchParams();

  const [activeStep, setActiveStep] = useState<UploadStep>(UploadStep.FILE);

  const folderPath = searchParams.get('folderpath') ?? '';

  const form = useForm<UploadFormValues>({
    defaultValues: { ...UPLOAD_DEFAULT_VALUES, folderPath },
  });

  const steps = [
    {
      id: UploadStep.FILE.toString(),
      title: t('upload.step_upload_file'),
    },
    {
      id: UploadStep.AUDIENCE.toString(),
      title: t('upload.step_define_scope'),
    },
  ];

  return (
    <HuGoThemeProvider>
      <FormProvider {...form}>
        <Stack
          sx={{
            minHeight: '100vh',
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
          }}
        >
          <UploadFileHeader />

          <Stack
            sx={{
              flex: 1,
              p: 4,
              gap: 4,
              maxWidth: 'md',
              mx: 'auto',
              width: '100%',
            }}
          >
            <Stepper
              currentStep={activeStep}
              steps={steps}
            />

            {activeStep === UploadStep.FILE && <UploadFileStep />}

            {activeStep === UploadStep.AUDIENCE && <UploadFileAudienceStep />}
          </Stack>

          <UploadFileFooter
            activeStep={activeStep}
            setActiveStep={setActiveStep}
          />
        </Stack>
      </FormProvider>
    </HuGoThemeProvider>
  );
};

export default UploadFile;