import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import zhCN from '../locale/zh-cn';
import { Button } from '../index';
import { Dialog as NextDialog } from '@alifd/next';
import {
  DialogProps as NextDialogProps,
  QuickShowConfig,
  QuickShowRet,
} from '@alifd/next/types/dialog';

interface DialogProps extends NextDialogProps {
  size?: 'xs' | 'small' | 'middle' | 'large';
}

class Dialog extends Component<DialogProps> {
  static wrapMethod = (type?: 'alert' | 'confirm') => (
    config: QuickShowConfig = {},
  ) => {
    let ret: QuickShowRet | undefined;

    const { onOk, onCancel, onClose } = config;
    config.onOk = () => {
      onOk && onOk();
      ret && ret.hide();
    };
    config.onCancel = () => {
      onCancel && onCancel();
      ret && ret.hide();
    };
    config.onClose = (...args) => {
      onClose && onClose(...args);
      ret && ret.hide();
    };

    if (!config.locale) {
      config.locale = zhCN.Dialog;
    }
    const okBtnChildren = config.okProps
      ? // @ts-ignore
      config.okProps.children
      : config.locale.ok;
    const cancelBtnChildren = config.cancelProps
      ? config.cancelProps.children
      : config.locale.cancel;
    if (type) {
      config.type = type;
    }

    const { footerAlign, footerActions, footer } = config;

    if (!footerAlign) {
      config.footerAlign = 'right';
    }

    if (!footerActions) {
      config.footerActions = type === 'alert' ? [ 'ok' ] : [ 'cancel', 'ok' ];
    }

    if (footer == null) {
      config.footer = [
        <Button
          type="secondary"
          className="next-dialog-btn"
          text
          size="small"
          onClick={config.onCancel}
        >
          {cancelBtnChildren}
        </Button>,
        <Button
          style={{ marginLeft: '8px' }}
          type="secondary"
          size="small"
          className="next-dialog-btn"
          onClick={config.onOk}
        >
          {okBtnChildren}
        </Button>,
      ];
    }

    ret = NextDialog[type || 'show'](config);
    return ret;
  };
  static show = Dialog.wrapMethod();
  static alert = Dialog.wrapMethod('alert');
  static confirm = Dialog.wrapMethod('confirm');
  // @ts-ignore
  static withContext = NextDialog.withContext;

  render() {
    const {
      footerAlign,
      footerActions,
      className,
      prefix = 'next-',
      size = 'small',
      isFullScreen,
    } = this.props;
    return (
      <NextDialog
        {...this.props}
        className={cls(className, {
          [`${prefix}dialog-nofooter`]: this.props.footer === false,
          [`${prefix}xs`]: size === 'xs',
          [`${prefix}small`]: size === 'small',
          [`${prefix}middle`]: size === 'middle',
          [`${prefix}large`]: size === 'large',
          [`${prefix}fullscreen`]: isFullScreen,
        })}
        footerAlign={!footerAlign ? 'center' : footerAlign}
        footerActions={
          !footerActions ? [ 'cancel', 'ok' ] : footerActions
        }
      />
    );
  }
}

// 这里不能覆盖
// hoistNonReactStatics(Dialog, NextDialog);

export default ConfigProvider.config(Dialog);