import { FC } from 'react';

import ArrowBackIcon from '@material-hu/icons/material/ArrowBack';
import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import LinearProgress from '@material-hu/mui/LinearProgress';
import Typography from '@material-hu/mui/Typography';

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

import { useStackStepForms } from 'src/contexts/StackStepFormsContext';
import { useFormFileUpload } from 'src/pages/dashboard/forms/FormFileUploadContext';
import { getCurrentProgress, isFormReadyToSubmit } from 'src/utils/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type FormFooterProps = {
  currentStep?: number;
  steps?: number;
  handleBack?: () => void;
  stepsList?: any[];
  isSubmitting?: boolean;
  formFilled: boolean;
  disabledContinue?: boolean;
};

const FormFooter: FC<FormFooterProps> = props => {
  const {
    currentStep,
    steps,
    handleBack,
    stepsList = [],
    isSubmitting,
    formFilled,
    disabledContinue = false,
  } = props;

  const { isUploadingAny } = useFormFileUpload();

  const { stackStepForms, hasBranching } = useStackStepForms();

  const { t } = useLokaliseTranslation('forms');

  const checkDisabledBackButton = () => {
    if (!hasBranching) {
      return currentStep === 0 || isUploadingAny;
    }
    return stackStepForms.length === 1;
  };

  const addCorrectLabelNextButton = () => {
    if (!hasBranching) {
      return currentStep + 1 === steps ? t('FINISH') : t('NEXT');
    }
    if (isFormReadyToSubmit(currentStep, steps, stepsList)) {
      return t('FINISH');
    }
    return t('NEXT');
  };

  const getProgress = () => {
    if (!hasBranching) {
      return getCurrentProgress(steps, currentStep + 1);
    } else {
      return getCurrentProgress(steps - 1, currentStep + 1);
    }
  };

  return (
    <Box
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        position: 'fixed',
        bottom: 0,
        width: '100%',
        height: '90px',
        marginBottom: '0px !important',
        zIndex: 20,
      }}
    >
      <Container
        maxWidth="md"
        sx={{ py: 2 }}
      >
        {steps > 1 && (
          <LinearProgress
            variant="determinate"
            value={getProgress()}
          />
        )}
        <Box
          sx={{
            width: '100%',
            display: 'flex',
            justifyContent: steps > 1 ? 'space-between' : 'center',
            alignItems: 'center',
            mt: 2,
          }}
        >
          {steps > 1 && (
            <Button
              color="primary"
              disabled={checkDisabledBackButton()}
              onClick={handleBack}
              sx={{ display: 'flex', alignItems: 'center' }}
            >
              <ArrowBackIcon
                fontSize="small"
                sx={{ mr: 0.4 }}
              />
              {t('BACK')}
            </Button>
          )}
          {!hasBranching && steps > 1 && (
            <Typography>
              {currentStep + 1}/{steps}
            </Typography>
          )}
          <Box>
            {!(formFilled && currentStep + 1 === steps) && (
              <Button
                variant="contained"
                disabled={isUploadingAny || isSubmitting || disabledContinue}
                color="primary"
                type="submit"
              >
                {addCorrectLabelNextButton()}
              </Button>
            )}
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default FormFooter;