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

/* 搜索框（移动端）— 规格 §28
   输入即过滤（不等回车）；放大镜是纯装饰（aria-hidden），名称由 label 落到 aria-label。
   有值且清除可用时出现清除按钮；showCancel=true 时右侧出现取消动作（触屏没有 Esc 键）。
   组件不发请求、不做防抖 —— 只回传关键词，节流由宿主决定（规格 §28.7）。 */

export default function Search({
  value = '',
  placeholder = '',
  round = true,
  showCancel = false,
  clearable = true,
  disabled = false,
  cancelText = '取消',
  label = '搜索',
  onInput,
  onSearch,
  onClear,
  onCancel,
  children = null,
}) {
  const filled = String(value || '').length > 0;

  const cls =
    'kole-m-search' +
    (round ? ' kole-m-search--round' : '') +
    (filled ? ' is-filled' : '') +
    (showCancel ? ' is-cancelable' : '') +
    (disabled ? ' is-disabled' : '');

  return (
    <div className={cls}>
      <div className="kole-m-search__form">
        {/* 整行热区是 label；清除按钮是 labelable 元素（button），必须在 label 外 */}
        <label className="kole-m-search__hit">
          <span className="kole-m-search__icon" aria-hidden="true" />
          <input
            className="kole-m-search__control"
            type="search"
            value={value}
            placeholder={placeholder}
            disabled={disabled}
            aria-label={label}
            onChange={(e) => {
              if (disabled) return;
              if (onInput) onInput(e.target.value);
            }}
            onKeyDown={(e) => {
              if (disabled) return;
              if (e.key === 'Enter' && onSearch) onSearch(value);
            }}
          />
        </label>
        {clearable && filled && !disabled ? (
          <button
            className="kole-m-search__clear"
            type="button"
            aria-label="清除"
            onClick={() => {
              if (onClear) onClear();
            }}
          >
            ✕
          </button>
        ) : null}
      </div>
      {showCancel ? (
        <button
          className="kole-m-search__cancel"
          type="button"
          disabled={disabled}
          onClick={() => {
            if (disabled) return;
            if (onCancel) onCancel();
          }}
        >
          {cancelText}
        </button>
      ) : null}
      {children}
    </div>
  );
}