import React, { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, MainButton, MainColorType } from '@nova-hf/ui';

import { StepChildrenProps } from './StepWrapper';

type FormWrapperProps = {
  color?: MainColorType;
  isDisabled: boolean;
  onClick?: () => void;
  children: ReactNode;
  isLastStep?: boolean;
  isCurrentStep?: boolean;
  isLoading?: boolean;
  shouldCenterContent?: boolean;
  customButtonTitle?: string;
  hasBackButton?: boolean;
} & StepChildrenProps;

export const FormWrapper = ({
  color = 'pink',
  isDisabled,
  onClick,
  children,
  isLastStep = false,
  isCurrentStep = true,
  isLoading,
  shouldCenterContent = true,
  onNext,
  onPrev,
  hasBackButton,
  customButtonTitle,
}: FormWrapperProps) => {
  const { t } = useTranslation('steps');
  return (
    <Box
      height="100%"
      marginY="auto"
      display="flex"
      paddingX={{ sm: 0, xl: 10 }}
      flexDirection="column"
      justifyContent="space-between"
      flexGrow={1}
    >
      <Box
        marginTop={{ sm: 3, lg: shouldCenterContent ? 'auto' : 10 }}
        marginBottom={{ sm: 0, lg: shouldCenterContent ? 'auto' : 4 }}
      >
        {children}
      </Box>
      {isCurrentStep && (
        <Box
          width={{ sm: '100%' }}
          position={{ sm: 'fixed', md: 'unset' }}
          display="flex"
          justifyContent="flex-end"
          gap={2}
          left={0}
          right={0}
          bottom={0}
          zIndex="stickybar"
        >
          {hasBackButton && (
            <Box width={{ sm: '100%', md: '4/12', xl: '3/12' }}>
              <MainButton
                colorScheme="white"
                text={t('buttons.prev')}
                onClick={onPrev}
                dottedShadow="none"
                isDisabled={isLoading}
              />
            </Box>
          )}
          <Box width={{ sm: '100%', md: '4/12', xl: '3/12' }}>
            <MainButton
              text={
                customButtonTitle
                  ? customButtonTitle
                  : isLastStep
                  ? t('buttons.lastStep')
                  : t('buttons.next')
              }
              colorScheme={color}
              icon="longArrowRight"
              isDisabled={isDisabled}
              isSubmitButton
              onClick={isLastStep ? onClick : onNext}
              isLoading={isLoading}
              dottedShadow="none"
            />
          </Box>
        </Box>
      )}
    </Box>
  );
};