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

/*** 进度条：轨道 + 渐变流动填充，value 信号驱动 0-100；满格切换 success 色并停止条纹 ***/
export function progress(props: ProgressProps): HTMLElement {
  const fill = h('div', { class: 'ua-progress-fill' });
  const track = h('div', { class: 'ua-progress-track' }, fill);
  const text = h('span', { class: 'ua-progress-text' });
  effect(() => {
    const v = clamp(props.value()); // 依赖收集：信号变化自动写回
    fill.style.width = `${v}%`;
    fill.classList.toggle('ua-done', v >= 100); // 满格切语义色
    text.textContent = `${Math.round(v)}%`;
  });
  return h('div', { class: 'ua-progress' }, track, props.showText === false ? null : text);
}

/*** 进度钳制到 0-100 ***/
function clamp(v: number): number {
  if (Number.isNaN(v)) return 0; // 卫语句：非法值归零
  return Math.min(100, Math.max(0, v));
}