import * as React from 'react';
import { BaseModalLayoutProps, ModalSkin } from '../BaseModalLayout';
import { TooltipCommonProps } from '../common';
import { ButtonProps, ButtonSize } from '../Button';
import { TooltipProps } from '../Tooltip';

export interface CustomModalLayoutProps extends BaseModalLayoutProps {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  content?: React.ReactNode;
  primaryButtonText?: React.ReactNode;
  primaryButtonProps?: Omit<ButtonProps, 'dataHook'>;
  primaryButtonOnClick?(): void;
  primaryButtonTooltipProps?: TooltipCommonProps & {
    content: TooltipProps['content'];
  };
  secondaryButtonText?: React.ReactNode;
  secondaryButtonProps?: Omit<ButtonProps, 'dataHook'>;
  secondaryButtonOnClick?(): void;
  actionsSize?: ButtonSize;
  sideActions?: React.ReactNode;
  footnote?: React.ReactNode;
  footnoteSkin?: 'neutral' | 'light';
  width?: React.CSSProperties['width'];
  maxWidth?: React.CSSProperties['maxWidth'];
  height?: React.CSSProperties['height'];
  maxHeight?: React.CSSProperties['maxHeight'];
  removeContentPadding?: boolean;
  showHeaderDivider?: 'auto' | boolean;
  showFooterDivider?: 'auto' | boolean;
  overflowY?: string;
  style?: React.CSSProperties;
  theme?: ModalSkin;
}

declare const CustomModalLayout: React.FC<CustomModalLayoutProps> & {
  Title: React.FunctionComponent<{ children?: React.ReactNode }>;
};
export default CustomModalLayout;