import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

import { FOOTER_Z_INDEX } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/constants';
import { useCertificateCreateSteps } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/contexts/CertificateCreateStepsContext';
import { useLokaliseTranslation } from 'src/utils/i18n';

type CertificatesCreateFooterProps = {
  onBack: () => void;
  onNext: () => void;
  onConfirm: () => void;
  /** Disables navigation and shows a spinner while a step request is running. */
  isSubmitting?: boolean;
  /** Switches the final action to "save changes" for the edit flow. */
  isEditMode?: boolean;
};

const CertificatesCreateFooter = ({
  onBack,
  onNext,
  onConfirm,
  isSubmitting = false,
  isEditMode = false,
}: CertificatesCreateFooterProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette, shadows } = useTheme();
  const { isLastStep, isFirstStep } = useCertificateCreateSteps();

  return (
    <Stack
      component="footer"
      sx={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: palette.new.background.elements.grey,
        boxShadow: shadows[2],
        py: 2,
        width: '100%',
        position: 'sticky',
        bottom: 0,
        zIndex: FOOTER_Z_INDEX,
      }}
    >
      <Container
        maxWidth="lg"
        sx={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          width: '100%',
        }}
      >
        {!isFirstStep && (
          <Button
            variant="tertiary"
            size="large"
            onClick={onBack}
            disabled={isSubmitting}
          >
            {t('general:back_alt')}
          </Button>
        )}
        {!isLastStep && (
          <Button
            variant="primary"
            size="large"
            onClick={onNext}
            loading={isSubmitting}
            sx={{ ml: 'auto' }}
          >
            {t('general:next')}
          </Button>
        )}
        {isLastStep && (
          <Button
            variant="primary"
            size="large"
            onClick={onConfirm}
            loading={isSubmitting}
            sx={{ ml: 'auto' }}
          >
            {isEditMode
              ? t('general:save_changes')
              : t('settings.certificates.create')}
          </Button>
        )}
      </Container>
    </Stack>
  );
};

export default CertificatesCreateFooter;