import { type ReactNode, useState } from 'react';
import {
  type FieldPath,
  type FieldValues,
  FormProvider,
  type UseFormReturn,
  useWatch,
} from 'react-hook-form';
import { type UseMutationResult } from 'react-query';

import { type AxiosResponse } from 'axios';

import Stack from '@material-hu/mui/Stack';
import { type SxProps } from '@material-hu/mui/styles';

import Button from '@material-hu/components/design-system/Buttons/Button';
import ProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import SectionHeader from 'src/pages/dashboard/TimeTracking/SectionHeader';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { CollabSelection } from '../constants';

type Step = {
  label: string;
  Component: ReactNode;
  sxContainerWrapper?: SxProps;
  sxContainer?: SxProps;
};

type Props<T extends FieldValues> = {
  createMutation: UseMutationResult<AxiosResponse<unknown>, unknown, void>;
  form: UseFormReturn<T>;
  steps: Step[];
  title: string;
  handleBackNavigation: () => void;
};

function CreationLayout<FormFields extends FieldValues>({
  createMutation,
  form,
  handleBackNavigation,
  steps,
  title,
}: Props<FormFields>) {
  const [activeStep, setActiveStep] = useState(0);
  const { t } = useLokaliseTranslation(['regions', 'time_tracker', 'general']);
  const HuGoThemeProvider = useHuGoTheme();

  const currentStep = steps[activeStep];
  const isLastStep = activeStep === steps.length - 1;
  const {
    formState: { isValid },
  } = form;

  const [regionsUserMode, userIds] = useWatch({
    control: form.control,
    name: ['regionsUserMode', 'userIds'] as FieldPath<FormFields>[],
  });
  const isTargetedWithNoUsers =
    regionsUserMode === CollabSelection.TARGETED_USERS &&
    (!Array.isArray(userIds) || userIds.length === 0);

  const isSubmitDisabled =
    createMutation.isLoading || (isLastStep ? isTargetedWithNoUsers : !isValid);

  const nextStep = () => {
    if (isLastStep) {
      createMutation.mutate();
      return;
    }
    setActiveStep(prev => prev + 1);
  };

  const previousStep = () => {
    setActiveStep(prev => prev - 1);
  };

  const isFirstStep = activeStep === 0;

  return (
    <HuGoThemeProvider>
      <FormProvider {...form}>
        <Stack
          sx={{
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.default,
            height: '100%',
            minHeight: '100vh',
          }}
        >
          <SectionHeader
            goBack={handleBackNavigation}
            title={title}
          />
          <Stack
            sx={{
              flex: 1,
              '& > *': { px: '18%' },
            }}
          >
            <Stack sx={{ flex: 1, pb: 5, pt: 3 }}>
              <ProgressBar
                total={steps.length}
                current={activeStep + 1}
                variant="determinate"
                title={currentStep.label}
                sx={{ mb: 3 }}
                description={t('time_tracker:policies.step_description', {
                  step: activeStep + 1,
                  totalSteps: steps.length,
                })}
              />
              {currentStep.Component}
            </Stack>
            <Stack
              sx={{
                flexDirection: 'row',
                justifyContent: isFirstStep ? 'flex-end' : 'space-between',
                backgroundColor: theme =>
                  theme.palette.new.background.layout.tertiary,
                boxShadow: theme => theme.shadows[2],
                py: 2,
                width: '100%',
                mt: 'auto',
                position: 'fixed',
                bottom: 0,
                left: 0,
                right: 0,
              }}
            >
              {!isFirstStep && (
                <Button
                  variant="secondary"
                  size="large"
                  onClick={previousStep}
                >
                  {t('general:back')}
                </Button>
              )}
              <Button
                variant="primary"
                size="large"
                disabled={isSubmitDisabled}
                loading={createMutation.isLoading}
                onClick={nextStep}
              >
                {t(isLastStep ? 'regions:finish' : 'general:next')}
              </Button>
            </Stack>
          </Stack>
        </Stack>
      </FormProvider>
    </HuGoThemeProvider>
  );
}

export default CreationLayout;