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

import Button, {
  type ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { LAYOUT_MAX_WIDTH } from '../../../constants';

export type FooterButtonProps = Pick<
  ButtonProps,
  'onClick' | 'disabled' | 'loading' | 'children'
> & {
  tooltip?: string;
  hide?: boolean;
};

export type TasksFooterProps = {
  previousButton: FooterButtonProps;
  nextButton: FooterButtonProps;
};

export const TasksFooter = ({
  previousButton = {},
  nextButton = {},
}: TasksFooterProps) => {
  const { palette } = useTheme();

  const {
    tooltip: nextTooltip,
    hide: hideNext,
    ...nextButtonProps
  } = nextButton;

  const {
    tooltip: previousTooltip,
    hide: hidePrevious,
    ...previousButtonProps
  } = previousButton;

  return (
    <Stack
      sx={{
        backgroundColor: palette.new.background.layout.tertiary,
        position: 'sticky',
        bottom: 0,
        width: '100%',
        height: '80px',
        minHeight: '80px',
        alignItems: 'center',
        justifyContent: 'center',
        px: 3,
        zIndex: 2,
      }}
    >
      <Stack
        sx={{
          width: '100%',
          flexDirection: 'row',
          maxWidth: LAYOUT_MAX_WIDTH,
          px: 3,
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        {!hidePrevious && (
          <HuTooltip
            title={previousTooltip}
            disableTooltip={!previousTooltip}
          >
            <Stack
              component="span"
              sx={{ mr: 'auto' }}
            >
              <Button
                variant="tertiary"
                {...previousButtonProps}
              />
            </Stack>
          </HuTooltip>
        )}
        {!hideNext && (
          <HuTooltip
            title={nextTooltip}
            disableTooltip={!nextTooltip}
          >
            <Stack
              component="span"
              sx={{ ml: 'auto' }}
            >
              <Button
                variant="primary"
                {...nextButtonProps}
              />
            </Stack>
          </HuTooltip>
        )}
      </Stack>
    </Stack>
  );
};

export default TasksFooter;