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

/* 列表（移动端）— 规格 §24
   一行 = 前缀位 + 主区 + 后缀位；可点行是原生 button（整行热区、键盘可达），
   纯展示行用 div + role="listitem"（原生语义优先于 listitem）。
   本端不接管滚动、不做虚拟列表（规格 §24.5）；inline 控件要自己阻止冒泡，避免一次点击触发两个动作。 */
export default function List({
  items = [],
  size = 'default',
  border = true,
  divider = 'inset',
  header = '',
  footer = '',
  emptyText = '',
  onSelect,
  children = null,
  empty = null,
}) {
  const cls =
    'kole-m-list' +
    (size === 'compact' ? ' kole-m-list--compact' : '') +
    (border ? ' kole-m-list--border' : '') +
    ` kole-m-list--${divider}`;

  const suffixOf = (it) => (
    <>
      {it.value ? <span className="kole-m-list__value">{it.value}</span> : null}
      {it.arrow ? (
        <span className="kole-m-list__arrow" aria-hidden="true">
          ›
        </span>
      ) : null}
    </>
  );

  const bodyOf = (it) => (
    <>
      {it.prefix ? <span className="kole-m-list__prefix">{it.prefix}</span> : null}
      <span className="kole-m-list__body">
        <span className="kole-m-list__title">{it.title}</span>
        {it.desc ? <span className="kole-m-list__desc">{it.desc}</span> : null}
      </span>
    </>
  );

  if (!items.length) {
    return (
      <div className={cls} role="list" aria-live="polite">
        {header ? <p className="kole-m-list__header">{header}</p> : null}
        {empty || <p className="kole-m-list__empty">{emptyText || '暂无数据'}</p>}
        {footer ? <p className="kole-m-list__footer">{footer}</p> : null}
      </div>
    );
  }

  return (
    <div className={cls} role="list">
      {header ? <p className="kole-m-list__header">{header}</p> : null}
      {items.map((it, i) =>
        it && it.static ? (
          /* 纯展示行：div + role="listitem"，不绑点击（规格 §24.6） */
          <div key={it.key || i} className={'kole-m-list__item' + (it.disabled ? ' is-disabled' : '')} role="listitem" aria-disabled={it.disabled ? 'true' : undefined}>
            {bodyOf(it)}
            <span className="kole-m-list__suffix">{suffixOf(it)}</span>
          </div>
        ) : (
          <button
            key={it.key || i}
            className={'kole-m-list__item' + (it.disabled ? ' is-disabled' : '')}
            type="button"
            disabled={!!it.disabled}
            onClick={(e) => {
              if (it.disabled) return;
              if (onSelect) onSelect(i, e);
            }}
          >
            {bodyOf(it)}
            <span className="kole-m-list__suffix">{suffixOf(it)}</span>
          </button>
        )
      )}
      {children}
      {footer ? <p className="kole-m-list__footer">{footer}</p> : null}
    </div>
  );
}