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

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

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

import { SIDEBAR_INFO_WIDTH } from './CompletedSurveyInfoSidebar';

export const SURVEY_FOOTER_HEIGHT = '94px';

type Props = {
  isLastStep: boolean;
  onNextSection: () => void;
  onGoBackSection: () => void;
  isNextSectionDisabled: boolean;
  isLoading?: boolean;
  showBack?: boolean;
  showNext?: boolean;
  sidebarSpacer?: boolean;
};

const Footer = ({
  isLastStep,
  onNextSection,
  onGoBackSection,
  isNextSectionDisabled,
  isLoading = false,
  showBack = true,
  showNext = true,
  sidebarSpacer = false,
}: Props) => {
  const { t } = useLokaliseTranslation('forms');

  const nextButtonLabel = isLastStep ? t('finish') : t('continue');

  return (
    <Stack
      sx={{
        flexShrink: 0,
        width: 1,
        flexDirection: 'row',
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        borderRadius: 0,
        height: SURVEY_FOOTER_HEIGHT,
      }}
    >
      <Container
        maxWidth="lg"
        sx={{
          display: 'flex',
          flex: 1,
          height: 1,
          alignItems: 'center',
          p: '0 !important',
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: 1,
            px: 3,
            gap: 1,
          }}
        >
          {showBack && (
            <Button
              variant="tertiary"
              size="large"
              onClick={onGoBackSection}
            >
              {t('back')}
            </Button>
          )}
          {showNext && (
            <Button
              variant="primary"
              size="large"
              onClick={onNextSection}
              loading={isLoading}
              disabled={isNextSectionDisabled}
              sx={{ ml: 'auto' }}
            >
              {nextButtonLabel}
            </Button>
          )}
        </Stack>
      </Container>
      {sidebarSpacer && (
        <Box
          sx={{
            flexShrink: 0,
            width: SIDEBAR_INFO_WIDTH,
          }}
        />
      )}
    </Stack>
  );
};

export default Footer;