import { h } from '@ui-arch/frame';
import type { ListProps } from './types.js';
import { empty } from './empty.js';

/*** 列表：header/footer 外壳 + 逐条 items（avatar / title / description / extra），传 onItemClick 时条目可点击，无数据回落空状态 ***/
export function list(props: ListProps): HTMLElement {
  // —— 状态集中声明 ——
  const clickable = typeof props.onItemClick === 'function'; // 仅提供回调时才加可点击样式
  const rootClass = props.bordered ? 'ua-list ua-list-bordered' : 'ua-list'; // 外边框由 bordered 决定
  const root = h('div', { class: rootClass }) as HTMLElement; // 列表根容器
  if (props.header) root.append(h('div', { class: 'ua-list-header' }, props.header));
  if (!props.items.length) {
    root.append(empty({ title: props.emptyText ?? '暂无数据' })); // 空列表复用空状态组件
    return root;
  }
  const body = h('div', { class: 'ua-list-body', role: 'list' }) as HTMLElement; // 条目容器，供读屏识别列表语义
  props.items.forEach((item, index) => {
    const row = h(
      'div',
      { class: clickable ? 'ua-list-item ua-list-clickable' : 'ua-list-item', role: 'listitem' },
      item.avatar ? h('div', { class: 'ua-list-avatar' }, item.avatar) : null, // 左侧头像/图标，缺省不留位
      h(
        'div',
        { class: 'ua-list-main' },
        h('div', { class: 'ua-list-title' }, item.title),
        item.description ? h('div', { class: 'ua-list-desc' }, item.description) : null,
      ),
      item.extra ? h('div', { class: 'ua-list-extra' }, item.extra) : null, // 右侧附加（时间、标签）
    );
    if (clickable) row.addEventListener('click', () => props.onItemClick?.(item, index)); // 点击回传条目与下标
    body.append(row);
  });
  root.append(body);
  if (props.footer) root.append(h('div', { class: 'ua-list-footer' }, props.footer));
  return root;
}