import * as React from 'react';
declare type EventType = React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
declare type getContainerFunc = () => HTMLElement;
declare const PlacementTypes: ['top', 'right', 'bottom', 'left'];
declare type placementType = typeof PlacementTypes[number];
export interface PushState {
  distance: string | number;
}
export interface DrawerProps {
  children?: React.ReactNode;
  /**
   * @description 是否显示右上角的关闭按钮
   * @default true
   */
  closable?: boolean;

  /**
   * @description 自定义关闭图标
   * @default <CloseOutlined />
   */
  closeIcon?: React.ReactNode;

  /**
   * @description 关闭时销毁 Drawer 里的子元素
   * @default false
   */
  destroyOnClose?: boolean;

  /**
   * @description 预渲染 Drawer 内元素
   * @default false
   */
  forceRender?: boolean;

  /**
   * @description 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom
   * @default body
   * @type HTMLElement | () => HTMLElement | Selectors | false
   */
  getContainer?: string | HTMLElement | getContainerFunc | false;

  /**
   * @description 点击蒙层是否允许关闭
   * @default true
   */
  maskClosable?: boolean;

  /**
   * @description 是否展示遮罩
   * @default true
   */
  mask?: boolean;

  /**
   * @description 遮罩样式
   * @default -
   */
  maskStyle?: React.CSSProperties;

  /**
   * @description 可用于设置 Drawer 最外层容器的样式，和 drawerStyle 的区别是作用节点包括 mask
   * @default -
   */
  style?: React.CSSProperties;

  /**
   * @description 用于设置 Drawer 弹出层的样式
   * @default -
   */
  drawerStyle?: React.CSSProperties;

  /**
   * @description 用于设置 Drawer 头部的样式
   * @default -
   */
  headerStyle?: React.CSSProperties;

  /**
   * @description 可用于设置 Drawer 内容部分的样式
   * @default -
   */
  bodyStyle?: React.CSSProperties;

  /**
   * @description 标题
   * @default -
   */
  title?: React.ReactNode;

  /**
   * @description Drawer 是否可见
   * @default -
   */
  visible?: boolean;

  /**
   * @description 	宽度
   * @default 256
   */
  width?: number | string;

  /**
   * @description 	高度
   * @default 256
   */
  height?: number | string;

  /**
   * @description 设置 Drawer 的 z-index
   * @default 1000
   */
  zIndex?: number;

  /**
   * @description 用于设置多层 Drawer 的推动行为
   * @type boolean | { distance: string | number }
   * @default { distance: 180 }
   */
  push?: boolean | PushState;

  /**
   * @description 抽屉的方向
   * @default right
   */
  placement?: 'top' | 'right' | 'bottom' | 'left';

  /**
   * @description 点击遮罩层或右上角叉或取消按钮的回调
   * @default -
   */
  onClose?: (e: EventType) => void;

  /**
   * @description 点击footer下的确定按钮
   * @default -
   */
  onOk?: (e: EventType) => void;

  /**
   * @description 切换抽屉时动画结束后的回调
   * @default -
   */
  afterVisibleChange?: (visible: boolean) => void;

  /**
   * @description 对话框外层容器的类名
   * @default -
   */
  className?: string;

  /**
   * @description 是否支持键盘 esc 关闭
   * @default true
   */
  keyboard?: boolean;

  /**
   * @description 抽屉的页脚 可以设为 footer={null}
   * @type ReactNode
   * @default (确定取消按钮)
   */
  footer?: React.ReactNode | false;

  /**
   * @description 抽屉页脚部件的样式
   * @default -
   * @type CSSProperties
   */
  footerStyle?: React.CSSProperties;

  /**
   * @description 取消按钮文本
   * @default 取消
   * @type string
   */
  cancelText?: string;

  /**
   * @description 确认按钮文本
   * @default 确定
   * @type string
   */
  okText?: string;
}

export interface IFooterProps {
  onClose: (e: any) => void;
  cancelText: string;
  okText: string;
  onOk: (e: any) => void;
}