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 { useNewPathStepper } from 'src/pages/dashboard/Learning/Paths/hooks/useNewPathStepper';

type PathNewFooterProps = {
  loading: boolean;
  onNextStep: () => void;
};

const PathNewFooter = ({ loading, onNextStep }: PathNewFooterProps) => {
  const { back, next } = useNewPathStepper();
  const { spacing, palette } = useTheme();

  return (
    <Stack
      component="footer"
      sx={{
        position: 'sticky',
        bottom: 0,
        zIndex: 2,
        height: spacing(10),
        width: '100%',
        backgroundColor: palette?.hugoBackground?.neutralBgSecondary,
        justifyContent: 'center',
      }}
    >
      <Container
        maxWidth="md"
        sx={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
      >
        {back.show && (
          <Button
            variant="tertiary"
            size="large"
            onClick={back.handle}
            disabled={back.disabled || loading}
          >
            {back.buttonText}
          </Button>
        )}
        {next.show && (
          <Button
            variant="primary"
            size="large"
            onClick={onNextStep}
            disabled={next.disabled || loading}
            loading={loading}
            sx={{ ml: 'auto' }}
          >
            {next.buttonText}
          </Button>
        )}
      </Container>
    </Stack>
  );
};

export default PathNewFooter;