import React from 'react';
import './Dialog.css';

/* 对话框（移动端）— 规格 §13；variant=confirm（两个按钮）/ alert（单个按钮铺满）；
   遮罩点击关闭（closeOnMask=false 时不关）；对话框 role=dialog + aria-modal + aria-labelledby。 */
export default function Dialog({
  variant = 'confirm',
  tone = 'default',
  round = false,
  open = false,
  closeOnMask = true,
  title = '',
  confirmText = '确定',
  cancelText = '取消',
  confirmDisabled = false,
  onConfirm,
  onCancel,
  children = null,
}) {
  const cls =
    'kole-m-dialog' +
    (round ? ' kole-m-dialog--round' : '') +
    (open ? ' is-open' : '');
  const titleId = 'kole-m-dialog-title';

  return (
    <>
      <div
        className={'kole-m-dialog__mask' + (open ? ' is-open' : '')}
        aria-hidden="true"
        onClick={() => {
          if (closeOnMask && onCancel) onCancel();
        }}
      />
      <div
        className={cls}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        data-close-on-mask={closeOnMask ? 'true' : 'false'}
      >
        <div className="kole-m-dialog__header" id={titleId}>
          {title}
        </div>
        <div className="kole-m-dialog__body">{children}</div>
        <div className="kole-m-dialog__footer">
          {variant === 'confirm' ? (
            <button
              className="kole-m-dialog__btn"
              type="button"
              onClick={() => {
                if (onCancel) onCancel();
              }}
            >
              {cancelText}
            </button>
          ) : null}
          <button
            className={
              'kole-m-dialog__btn ' +
              (tone === 'danger' ? 'kole-m-dialog__btn--danger' : 'kole-m-dialog__btn--primary')
            }
            type="button"
            disabled={confirmDisabled}
            aria-busy={confirmDisabled ? 'true' : undefined}
            onClick={() => {
              if (confirmDisabled) return;
              if (onConfirm) onConfirm();
            }}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </>
  );
}