import { FC, ReactNode } from 'react';

import Stack, { StackProps } from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

const FOOTER_HEIGHT = 84;
export const CONTAINER_MAX = 800;

type DraftStepperLayoutProps = {
  children: ReactNode;
  primaryButtonProps?: {
    text?: string;
    onClick?: () => void;
    disabled?: boolean;
    isLoading?: boolean;
  };
  secondaryButtonProps?: {
    text?: string;
    onClick: () => void;
    disabled?: boolean;
    icon?: ReactNode;
  };
  tertiaryButtonProps?: {
    text?: string;
    onClick: () => void;
    disabled?: boolean;
  };
  withFooter?: boolean;
  sx?: StackProps['sx'];
};

const DraftStepperLayout: FC<DraftStepperLayoutProps> = props => {
  const {
    children,
    primaryButtonProps,
    secondaryButtonProps,
    tertiaryButtonProps,
    sx,
    withFooter = true,
  } = props;
  const { t } = useTranslation();
  return (
    <>
      <Stack
        sx={{
          width: '100%',
          alignItems: 'center',
          height: '100%',
          overflowX: 'hidden',
          overflowY: 'scroll',
          p: 4,
          ...sx,
        }}
      >
        <Stack
          sx={{
            maxWidth: `${CONTAINER_MAX}px`,
            width: '100%',
          }}
        >
          {children}
        </Stack>
      </Stack>
      {withFooter && (
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'center',
            bgcolor: theme => theme.palette.new.background.elements.grey,
            minHeight: `${FOOTER_HEIGHT}px`,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              flex: 1,
              maxWidth: `${CONTAINER_MAX}px`,
            }}
          >
            {tertiaryButtonProps && (
              <Button
                size="large"
                onClick={tertiaryButtonProps.onClick}
                disabled={tertiaryButtonProps.disabled}
              >
                {tertiaryButtonProps.text || t('GO_BACK')}
              </Button>
            )}
            <Stack
              sx={{
                flexDirection: 'row',
                flex: 1,
                width: '100%',
                justifyContent: tertiaryButtonProps
                  ? 'flex-end'
                  : 'space-between',
                gap: 2,
              }}
            >
              {secondaryButtonProps && (
                <Button
                  variant="secondary"
                  size="large"
                  onClick={secondaryButtonProps.onClick}
                  disabled={secondaryButtonProps.disabled}
                  startIcon={secondaryButtonProps?.icon || undefined}
                >
                  {secondaryButtonProps.text || t('GO_BACK')}
                </Button>
              )}
              {primaryButtonProps && (
                <Button
                  variant="primary"
                  size="large"
                  onClick={primaryButtonProps.onClick}
                  disabled={primaryButtonProps.disabled}
                  loading={primaryButtonProps.isLoading}
                >
                  {primaryButtonProps.text || t('CONTINUE')}
                </Button>
              )}
            </Stack>
          </Stack>
        </Stack>
      )}
    </>
  );
};

export default DraftStepperLayout;