import { h } from '@ui-arch/frame';

const MIN = 56; // 列宽下限：小于这个值表头文字会被压成竖排

/*** 列宽手柄：右缘拖动改 <col> 宽度（双击复位），← → 每次微调 8px，两者共用 apply 收口 ***/
export function attachResize(th: HTMLElement, col: HTMLElement, start: number, label: string): void {
  // —— 状态集中声明 ——
  let dragging = false; // 是否处于拖拽中
  let originX = 0;      // 按下时的指针横坐标
  let originW = 0;      // 按下时的实际列宽

  /*** 唯一写宽入口：夹取下限后写回 <col> ***/
  const apply = (w: number): void => { col.style.width = `${Math.max(MIN, Math.round(w))}px`; };

  const grip = h('span', {
    class: 'ua-col-grip',
    role: 'separator', // 可调节分隔符语义：读屏可识别为「可调整」
    'aria-orientation': 'vertical',
    'aria-label': `调整「${label}」列宽`,
    tabindex: '0',
    onpointerdown: (e: PointerEvent) => {
      dragging = true;
      originX = e.clientX;
      originW = col.getBoundingClientRect().width; // 取实际渲染宽度，避免与 min-width 打架
      grip.setPointerCapture(e.pointerId); // 捕获指针：拖出表头也继续跟手
      e.preventDefault(); // 不触发列头排序
      e.stopPropagation();
      document.body.classList.add('ua-col-resizing'); // 拖拽期间全局禁用文本选中
    },
    onpointermove: (e: PointerEvent) => { if (dragging) apply(originW + e.clientX - originX); },
    onpointerup: stop,
    onpointercancel: stop,
    onclick: (e: MouseEvent) => e.stopPropagation(), // 点手柄不该触发排序
    ondblclick: (e: MouseEvent) => { e.stopPropagation(); apply(start); }, // 双击回到声明宽度
    onkeydown: (e: KeyboardEvent) => {
      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; // 卫语句：只接管方向键
      e.preventDefault();
      e.stopPropagation(); // 不冒泡到表格的行选择等外层快捷键
      apply(col.getBoundingClientRect().width + (e.key === 'ArrowRight' ? 8 : -8));
    },
  }) as HTMLElement;

  /*** 拖拽收尾：复位标志与全局样式 ***/
  function stop(): void {
    if (!dragging) return; // 卫语句：不在拖拽中
    dragging = false;
    document.body.classList.remove('ua-col-resizing');
  }

  th.append(grip);
}