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

/* 输入框（移动端）— 规格 §27
   结构：field（容器）> input（框）> prefix / control / clear + error（框外提示）。
   控件是原生 input：键盘、输入法、autofill 都用系统能力，组件不自造输入法。
   有值且 clearable 时才出现清除按钮；错误态同时写 is-error 与 aria-invalid，
   错误文案用 aria-describedby 关联（规格 §27.6）。 */

export default function Input({
  value = '',
  size = 'default',
  placeholder = '',
  prefix = '',
  clearable = false,
  disabled = false,
  error = '',
  label = '输入框',
  onInput,
  onConfirm,
  onClear,
  children = null,
}) {
  const filled = String(value || '').length > 0;

  const fieldCls =
    'kole-m-input' +
    (size === 'large' ? ' kole-m-input--large' : '') +
    (filled ? ' is-filled' : '') +
    (error ? ' is-error' : '') +
    (disabled ? ' is-disabled' : '');

  const errorId = 'kole-m-input-error';

  return (
    <div className="kole-m-field">
      <div className={fieldCls}>
        {/* 整行热区是 label；清除按钮是 labelable 元素（button），必须在 label 外 */}
        <label className="kole-m-input__hit">
          {prefix ? (
            <span className="kole-m-input__prefix" aria-hidden="true">
              {prefix}
            </span>
          ) : null}
          <input
            className="kole-m-input__control"
            type="text"
            value={value}
            placeholder={placeholder}
            disabled={disabled}
            aria-label={label}
            aria-invalid={error ? 'true' : undefined}
            aria-describedby={error ? errorId : undefined}
            onChange={(e) => {
              if (disabled) return;
              if (onInput) onInput(e.target.value);
            }}
            onKeyDown={(e) => {
              if (disabled) return;
              if (e.key === 'Enter' && onConfirm) onConfirm(value);
            }}
          />
        </label>
        {clearable && filled && !disabled ? (
          <button
            className="kole-m-input__clear"
            type="button"
            aria-label="清除"
            onClick={() => {
              if (onClear) onClear();
            }}
          >
            ✕
          </button>
        ) : null}
        {children ? <span className="kole-m-input__suffix">{children}</span> : null}
      </div>
      {error ? (
        <span className="kole-m-input__error" id={errorId} role="alert">
          {error}
        </span>
      ) : null}
    </div>
  );
}