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

/* 步进器（移动端）— 规格 §30
   减号 / 值 / 加号三段，加减各自是 44px 见方热区（规格 §30.5）。
   到 min / max 时按钮**留在原位灰**（不隐藏）：触屏上按钮消失会让用户以为界面坏了。
   值区在只读态是 role="spinbutton" + aria-valuenow/min/max；editable=true 时是可聚焦的数字输入框。
   本端只回传目标值（onChange），是否采纳由宿主决定；不做长按连击（桌面习惯，触屏易多跳）。 */

export default function Stepper({
  value = 1,
  min = 1,
  max = 99,
  step = 1,
  size = 'default',
  round = false,
  editable = false,
  disabled = false,
  label = '',
  onChange,
  onInput,
  children = null,
}) {
  const atMin = value <= min;
  const atMax = value >= max;

  const cls =
    'kole-m-stepper' +
    (size === 'small' ? ' kole-m-stepper--small' : '') +
    (round ? ' kole-m-stepper--round' : '') +
    (disabled ? ' is-disabled' : '');

  function emit(next) {
    const clamped = Math.max(min, Math.min(max, next));
    if (clamped === value) return;
    if (onChange) onChange(clamped);
  }

  return (
    <div className={cls} role="group" aria-label={label || undefined}>
      <button
        className="kole-m-stepper__minus"
        type="button"
        aria-label="减少"
        disabled={disabled || atMin}
        onClick={() => emit(value - step)}
      >
        −
      </button>
      {editable ? (
        <input
          className="kole-m-stepper__value"
          type="text"
          inputMode="numeric"
          value={String(value)}
          disabled={disabled}
          aria-label={label || '数量'}
          onChange={(e) => {
            if (disabled) return;
            if (onInput) onInput(e.target.value);
          }}
        />
      ) : (
        <span
          className="kole-m-stepper__value"
          role="spinbutton"
          aria-valuenow={value}
          aria-valuemin={min}
          aria-valuemax={max}
        >
          {value}
        </span>
      )}
      {children}
      <button
        className="kole-m-stepper__plus"
        type="button"
        aria-label="增加"
        disabled={disabled || atMax}
        onClick={() => emit(value + step)}
      >
        ＋
      </button>
    </div>
  );
}