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

/* 动作面板（移动端）— 规格 §3；滑出 240ms，遮罩点击关闭，操作项热区 ≥ 56px */
export default function ActionSheet({
  visible = false,
  title = '',
  actions = [],
  cancelText = '取消',
  cancelStyle = 'separate',
  onClose,
  onSelect,
  label = '动作面板',
}) {
  return (
    <>
      <div
        className={'kole-m-actionsheet__mask' + (visible ? ' is-open' : '')}
        aria-hidden="true"
        onClick={onClose}
      />
      <div
        className={
          'kole-m-actionsheet' +
          (cancelStyle === 'inline' ? ' kole-m-actionsheet--inline' : '') +
          (visible ? ' is-open' : '')
        }
        data-state={visible ? 'open' : 'closed'}
        role="dialog"
        aria-modal="true"
        aria-label={label}
      >
        {title ? <p className="kole-m-actionsheet__title">{title}</p> : null}
        {actions.map((a, i) => (
          <button
            key={a.key || i}
            className={
              'kole-m-actionsheet__action' +
              (a.tone === 'danger' ? ' kole-m-actionsheet__action--danger' : '')
            }
            type="button"
            disabled={!!a.disabled}
            aria-label={a.ariaLabel}
            onClick={() => {
              if (a.disabled) return;
              if (onSelect) onSelect(a.key, a);
              if (onClose) onClose();
            }}
          >
            {a.label}
          </button>
        ))}
        <button
          className="kole-m-actionsheet__action kole-m-actionsheet__cancel"
          type="button"
          onClick={onClose}
        >
          {cancelText}
        </button>
      </div>
    </>
  );
}