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

// 间距档位 → 令牌（数字档位不入表，直接拼像素）
const GUTTER: Record<string, string> = { sm: 'var(--ua-space-2)', md: 'var(--ua-space-3)', lg: 'var(--ua-space-4)' };
// 交叉轴对齐 → grid align-items 取值
const ALIGN: Record<string, string> = { start: 'start', center: 'center', end: 'end', stretch: 'stretch' };

/*** 栅格容器：columns 固定列数、min 走 auto-fit 自适应列宽，gutter 统一列间距；列模板写进 --ua-grid-cols，窄屏由样式表降为单列 ***/
export function grid(props: GridProps, ...children: unknown[]): HTMLElement {
  const gutter = typeof props.gutter === 'number' ? `${props.gutter}px` : GUTTER[props.gutter ?? 'md']; // 数字档位按像素透传
  const template = props.min
    ? `repeat(auto-fit, minmax(${props.min}, 1fr))` // 自适应：列数由可用宽度决定
    : `repeat(${props.columns ?? 3}, minmax(0, 1fr))`; // 固定列数：minmax(0,1fr) 防止长内容撑破
  const el = h('div', {
    class: ['ua-grid', props.dense ? 'is-dense' : '', props.align ? `is-align-${props.align}` : ''].filter(Boolean).join(' '),
    style: `gap:${gutter};align-items:${ALIGN[props.align ?? 'stretch']};`,
  }, ...children);
  el.style.setProperty('--ua-grid-cols', template); // 列模板交给 CSS 变量，媒体查询可覆盖
  return el;
}