import Stack from '@material-hu/mui/Stack';
import { type SxProps } from '@material-hu/mui/styles';
import { type Theme } from '@material-hu/mui/styles/createTheme';

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

import { CONFIG_FOOTER_HEIGHT, CONFIG_SIDEBAR_WIDTH } from '../constants';

type Item = {
  variant?: ButtonProps['variant'];
  label: string;
  onClick: () => void;
  disabled?: boolean;
  isLoading?: boolean;
};

export type FooterProps = {
  back?: Item;
  draft?: Item;
  next?: Item;
  sx?: SxProps<Theme>;
};

const BUTTON_SX = { minWidth: 256, height: 46 };

export const Footer = ({ back, draft, next, sx }: FooterProps) => {
  return (
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        height: CONFIG_FOOTER_HEIGHT,
        pl: `${CONFIG_SIDEBAR_WIDTH}px`,
        width: '100%',
        ...sx,
      }}
    >
      <Stack
        sx={{
          alignItems: 'center',
          flex: 0,
          flexDirection: 'row',
          justifyContent: back ? 'space-between' : 'flex-end',
          maxWidth: 1040,
          mx: 'auto',
          px: 4,
          py: 2,
          width: '100%',
        }}
      >
        {back && (
          <Button
            variant="tertiary"
            onClick={back.onClick}
            disabled={back.disabled || back.isLoading || false}
            sx={BUTTON_SX}
          >
            {back.label}
          </Button>
        )}
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 2,
          }}
        >
          {draft && (
            <Button
              variant={draft.variant || 'secondary'}
              onClick={draft.onClick}
              disabled={draft.disabled || draft.isLoading || false}
              sx={BUTTON_SX}
            >
              {draft.label}
            </Button>
          )}
          {next && (
            <Button
              variant={next.variant || 'primary'}
              onClick={next.onClick}
              disabled={next.disabled || next.isLoading || false}
              sx={BUTTON_SX}
              endIcon={
                next.isLoading && (
                  <Spinner
                    centered
                    size={18}
                  />
                )
              }
            >
              {!next.isLoading && next.label}
            </Button>
          )}
        </Stack>
      </Stack>
    </Stack>
  );
};