/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
// eslint-disable-next-line import/no-extraneous-dependencies
import * as React from 'react';
import classnames from 'classnames';
import OPButton from '../op-button';
// import event from '../event';
import { DialogSizeEnum, IconEnum } from './constants';
import './index.scss';

type DialogSize = 'small' | 'medium' | 'large';
type IconType = 'success' | 'warning' | 'notice' | 'about';
type DefaultFooterActions = 'cancel' | 'ok';
type FlagClass = 'cancel-left' | 'ok-left';
type StateEnum = 'error';

interface DialogProps {
  className?: string;
  visible: boolean;
  title?: React.ReactNode;
  subTitle?: React.ReactNode;
  onOk?: () => void;
  onCancel?: () => void;
  children?: React.ReactNode;
  footer?: boolean | React.ReactNode;
  maskClosable?: boolean;
  okText?: React.ReactNode;
  cancelText?: React.ReactNode;
  bodyStyle?: React.CSSProperties;
  size?: DialogSize;
  icon?: IconType;
  footerActions?: Array<DefaultFooterActions>;
  width?: number | string;
  loading?: boolean;
  okHotKey?: string;
  cancelHotKey?: string;
  okDisabled?: boolean;
  cancelDisabled?: boolean;
  state?: StateEnum;
}

export default function Dialog(props: DialogProps) {
  let flagClass: FlagClass;
  const {
    className = '',
    visible = false,
    title,
    children,
    onOk = () => {},
    onCancel = () => {},
    footer = true,
    maskClosable = true,
    bodyStyle,
    size = 'small',
    okText = '确定',
    cancelText = '取消',
    icon,
    subTitle,
    footerActions = ['cancel', 'ok'],
    width,
    loading,
    okHotKey = 'Enter',
    cancelHotKey = 'Esc',
    cancelDisabled,
    okDisabled,
    state = '',
  } = props;

  const show = { opacity: 1 } as any;
  const hide = { opacity: 0 } as any;

  return visible ? (
    <div
      className={classnames(
        'op-dialog-container',
        state && `op-dialog-${state}`,
        className,
      )}
      style={visible ? show : hide}
    >
      <div
        className='op-dialog-inner-content'
        style={{ width: width || DialogSizeEnum[size] }}
      >
        <div className={classnames('op-inner-content-header')}>
          {title && (
            <div className='op-inner-content-title'>
              {icon && (
                <img
                  src={IconEnum[icon]}
                  width='44'
                  height='44'
                  style={{ margin: '0 12px -6px 0 ' }}
                  alt=''
                />
              )}
              {title}
            </div>
          )}
          {subTitle && <div className='op-dialog-sub-title'>{subTitle}</div>}
        </div>
        <div
          className={classnames('op-inner-content-center')}
          style={bodyStyle}
        >
          {children}
        </div>
        {footer && (
          <div className={classnames('op-inner-content-footer')}>
            {typeof footer === 'boolean' ? (
              <>
                {footerActions.map((item: DefaultFooterActions, index) => {
                  if (index === 0) {
                    if (item === 'cancel') {
                      flagClass = 'cancel-left';
                    } else {
                      flagClass = 'ok-left';
                    }
                  }

                  if (index === 1) {
                    if (item === 'cancel') {
                      flagClass = 'ok-left';
                    } else {
                      flagClass = 'cancel-left';
                    }
                  }

                  return (
                    <>
                      {item === 'cancel' && (
                        <OPButton
                          data-hottag='cn-op.dialog-cancel'
                          disabled={cancelDisabled}
                          type='secondary'
                          key={item}
                          onClick={onCancel}
                          className={classnames({
                            'button-right':
                              flagClass === 'cancel-left' &&
                              footerActions.length !== 1,
                          })}
                          hotkey={cancelHotKey}
                        >
                          {cancelText}
                        </OPButton>
                      )}
                      {item === 'ok' && (
                        <OPButton
                          data-hottag='cn-op.dialog-ok'
                          disabled={okDisabled}
                          loading={loading}
                          key={item}
                          type='primary'
                          onClick={onOk}
                          className={classnames({
                            'button-right':
                              flagClass === 'ok-left' &&
                              footerActions.length !== 1,
                          })}
                          hotkey={okHotKey}
                        >
                          {okText}
                        </OPButton>
                      )}
                    </>
                  );
                })}
              </>
            ) : (
              footer
            )}
          </div>
        )}
      </div>
      <div className='mask' onClick={() => maskClosable && onCancel()} />
    </div>
  ) : (
    <div />
  );
}

// export default OPDialog;