import { FC } from 'react';
import { useNavigate } from 'react-router';

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

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

import { useMobile } from 'src/contexts/MobileContext';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FocusNavbar from 'src/components/FocusNavbar';

import { banBajioRoutes } from './routes';

type LoanRequestsLayoutProps = {
  children: React.ReactNode;
  nextStepLabel?: string;
  onGoToNextStep: () => void;
  onGoToPreviousStep: () => void;
  currentStep: number;
  disabledNextStep?: boolean;
  loadingNextStep?: boolean;
};

const LoanRequestsLayout: FC<LoanRequestsLayoutProps> = ({
  children,
  onGoToNextStep,
  onGoToPreviousStep,
  currentStep,
  nextStepLabel,
  disabledNextStep,
  loadingNextStep,
}) => {
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation('banbajio');

  const { isMobile } = useMobile();

  const steps = [
    {
      title: t('LOAN_REQUESTS_STEP_1'),
      id: 'loan-requests1',
    },
    {
      title: t('LOAN_REQUESTS_STEP_2'),
      id: 'loan-requests2',
    },
    {
      title: t('LOAN_REQUESTS_STEP_3'),
      id: 'loan-requests3',
    },
  ];

  return (
    <FocusNavbar
      navbarProps={{
        title: t('LOAN'),
        onClick: () =>
          navigate(banBajioRoutes.home() + (isMobile ? '-mobile/1' : '')),
      }}
      bottomBarContent={
        <Container
          maxWidth="md"
          sx={{
            display: 'flex',
            justifyContent: 'flex-end',
            alignItems: 'flex-end',
            gap: 1,
          }}
        >
          {currentStep > 0 && (
            <Button
              onClick={onGoToPreviousStep}
              size="large"
              variant="tertiary"
            >
              {t('general:previous')}
            </Button>
          )}
          <Button
            onClick={onGoToNextStep}
            variant="primary"
            size="large"
            disabled={disabledNextStep}
            loading={loadingNextStep}
          >
            {nextStepLabel || t('general:continue')}
          </Button>
        </Container>
      }
      content={
        <>
          <Container maxWidth="md">
            {isMobile ? (
              <Stack sx={{ height: 5 }} />
            ) : (
              <HuStepper
                currentStep={currentStep}
                steps={steps}
                sx={{ my: 5 }}
              />
            )}
            {children}
          </Container>
        </>
      }
    />
  );
};

export default LoanRequestsLayout;
