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

/* 多行文本框（移动端）— 规格 §31
   控件是原生 textarea：键盘、输入法、autofill 都用系统能力。
   最小高度 3 行（触屏上看不到桌面那样的输入上下文）；只允许纵向伸缩，横向拉宽会破坏 375 宽布局。
   计数与错误提示都在框外下方（同一行时两者都不消失）；到达上限置 is-full（计数转错误色）。
   不做自动增高：高度随内容跳动会让上下文错位，需要更长时用 size=large（规格 §31.5）。 */

export default function Textarea({
  value = '',
  size = 'default',
  placeholder = '',
  maxlength = 200,
  showCounter = false,
  disabled = false,
  error = '',
  label = '多行文本',
  rows = 3,
  onInput,
  children = null,
}) {
  const text = String(value || '');
  const full = maxlength > 0 && text.length >= maxlength;

  const cls =
    'kole-m-textarea' +
    (size === 'large' ? ' kole-m-textarea--large' : '') +
    (full ? ' is-full' : '') +
    (error ? ' is-error' : '') +
    (disabled ? ' is-disabled' : '');

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

  return (
    <div className={cls}>
      <textarea
        className="kole-m-textarea__control"
        rows={rows}
        value={value}
        placeholder={placeholder}
        maxLength={maxlength > 0 ? maxlength : undefined}
        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);
        }}
      />
      {showCounter || error ? (
        <div className="kole-m-textarea__foot">
          {error ? (
            <span className="kole-m-textarea__error" id={errorId} role="alert">
              {error}
            </span>
          ) : null}
          {showCounter ? (
            <span className="kole-m-textarea__counter" aria-live="polite">
              {text.length}/{maxlength}
            </span>
          ) : null}
        </div>
      ) : null}
      {children}
    </div>
  );
}