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

/* 数字键盘（移动端）— 规格 §17。
   键盘本身不持有输入值：只把按键名 emit 给宿主，由宿主决定写入哪个输入框（规格 §17.5）。
   type=number → 0-9 + 小数点；type=digit → 纯 0-9（没有小数点键，删除键落在最后一格）。
   showDelete=false 不渲染删除键；showConfirm=true 渲染跨两列的确认键，confirmDisabled 时禁用。
   每个按键是原生 button，文字即按键名；删除键用 aria-label="删除"（规格 §17.6，不读成符号）。
   默认插槽给宿主放「当前输入值」这类展示内容，键盘组件既不读也不写它。 */

/* 按键表：与规格 §17.3 的 type 变体一一对应（digit 少一个 "."） */
const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0'];
const DIGIT_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

export default function NumberKeyboard({
  type = 'number',
  showDelete = true,
  showConfirm = false,
  open = false,
  confirmDisabled = false,
  onInput,
  children = null,
}) {
  const keys = type === 'digit' ? DIGIT_KEYS : NUMBER_KEYS;
  const groupLabel = type === 'digit' ? '数字键盘（纯数字）' : '数字键盘（含小数点）';

  /* 删除键与确认键也走同一条 emit 通道：宿主要想区分，看载荷是不是 'delete' / 'confirm' */
  function press(key) {
    if (onInput) onInput(key);
  }

  return (
    <>
      {children}
      <div
        className={'kole-m-numberkeyboard' + (open ? ' is-open' : '')}
        role="group"
        aria-label={groupLabel}
      >
        {keys.map((key) => (
          <button
            key={key}
            className="kole-m-numberkeyboard__key"
            type="button"
            onClick={() => press(key)}
          >
            {key}
          </button>
        ))}
        {showDelete ? (
          <button
            className="kole-m-numberkeyboard__key kole-m-numberkeyboard__key--delete"
            type="button"
            aria-label="删除"
            onClick={() => press('delete')}
          >
            ⌫
          </button>
        ) : null}
        {showConfirm ? (
          <button
            className="kole-m-numberkeyboard__confirm"
            type="button"
            disabled={confirmDisabled}
            onClick={() => press('confirm')}
          >
            确认
          </button>
        ) : null}
      </div>
    </>
  );
}