import PropTypes from 'prop-types';
import { useMemoizedFn } from 'ahooks';

import Button from '../Button';
import Dialog from './dialog';

/**
 * @typedef {import('../Button/wrap').ButtonProps} ButtonProps
 * @typedef {import('@mui/material').PaperProps} PaperProps
 * @typedef {{
 *   title: React.ReactNode,
 *   open: boolean,
 *   onConfirm: Function,
 *   onCancel: Function,
 *   children?: React.ReactNode,
 *   showCancelButton?: true | false,
 *   showCloseButton?: true | false,
 *   showConfirmButton?: true | false,
 *   fullScreen?: false | true,
 *   confirmButton?: {text: React.ReactNode, props?: ButtonProps}
 *   cancelButton?: {text: React.ReactNode, props?: ButtonProps}
 *   PaperProps?: PaperProps
 * }} ConfirmProps
 */

// 注意排在 {...rest} 之后的 props 优先级更高
/**
 *
 * @param {ConfirmProps} props
 * @returns {import('react').ReactComponentElement}
 */
export default function Confirm({
  title,
  children,
  onConfirm,
  onCancel,
  showCloseButton = true,
  showCancelButton = true,
  showConfirmButton = true,
  fullScreen = false,
  confirmButton = {
    text: 'Confirm',
  },
  cancelButton = {
    text: 'Cancel',
  },
  PaperProps = {},
  ...rest
}) {
  // 去除 dialog 默认的 300 最小高度
  PaperProps.style = Object.assign(
    {
      minHeight: 0,
    },
    PaperProps.style
  );

  const handleClose = useMemoizedFn((e, reason) => {
    if (['backdropClick', 'escapeKeyDown'].includes(reason)) {
      return;
    }
    e.stopPropagation();
    onCancel(e, reason);
  });

  return (
    <Dialog
      title={title}
      PaperProps={PaperProps}
      {...rest}
      onClose={handleClose}
      showCloseButton={showCloseButton}
      fullScreen={fullScreen}
      slotProps={{
        header: {
          sx: {
            '.ux-dialog_title': {
              lineHeight: 1,
            },
          },
        },
        content: {
          sx: {
            paddingTop: '0!important',
            border: 'none!important',
          },
        },
      }}
      actions={
        showCancelButton || showConfirmButton ? (
          <>
            {showCancelButton && (
              <Button
                onClick={(e) => {
                  e.stopPropagation();
                  onCancel(e, 'closeButton');
                }}
                color="primary"
                {...cancelButton.props}>
                {cancelButton.text}
              </Button>
            )}
            {showConfirmButton && (
              <Button
                onClick={(e) => {
                  e.stopPropagation();
                  onConfirm(e);
                }}
                color="primary"
                autoFocus
                {...confirmButton.props}>
                {confirmButton.text}
              </Button>
            )}
          </>
        ) : null
      }>
      {children}
    </Dialog>
  );
}

Confirm.propTypes = {
  title: PropTypes.node.isRequired,
  open: PropTypes.bool.isRequired,
  onConfirm: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
  showCancelButton: PropTypes.bool,
  showConfirmButton: PropTypes.bool,
  showCloseButton: PropTypes.bool,
  fullScreen: PropTypes.bool,
  // 可以传入 {text: ..., props: ...}
  confirmButton: PropTypes.shape({
    text: PropTypes.node.isRequired,
    props: PropTypes.object,
  }),
  cancelButton: PropTypes.shape({
    text: PropTypes.node.isRequired,
    props: PropTypes.object,
  }),
  PaperProps: PropTypes.object,
};
