import type { ReactElement } from 'react'
import type { ChangeStop } from './diffView'
import { usePinnedHeight } from './useScrollPosition'

const CHANGE_NAMES = { add: '新增', mod: '修改', del: '删除' } as const

/**
 * 预览右边缘的总览条：从筛选栏下面贴到底，每处改动（见 ChangeStop）按它在文件里的行画一段刻度，新增绿、修改蓝、删除红（删掉的块一条细线），
 * 点刻度跳过去。lineCount 是新文件一共几行。
 */
export function OverviewRuler({ stops, lineCount, onPick }: { stops: readonly ChangeStop[], lineCount: number, onPick: (stop: ChangeStop) => void }): ReactElement {
  const top = usePinnedHeight()
  const total = Math.max(lineCount, 1)
  const percent = (line: number): string => `${(Math.min(Math.max(line, 0), total) / total) * 100}%`
  return (
    <nav className="cr-ruler" style={{ top }} aria-label="改动总览">
      <div className="cr-ruler-track">
        {stops.map(stop => (
          <button
            key={stop.id}
            type="button"
            className="cr-ruler-tick"
            data-change={stop.change}
            style={{ top: percent(stop.from), ...(stop.change !== 'del' && { height: percent(stop.to - stop.from + 1) }) }}
            data-tooltip={`${CHANGE_NAMES[stop.change]} · 第 ${stop.from + 1} 行`}
            aria-label={`${CHANGE_NAMES[stop.change]}，第 ${stop.from + 1} 行`}
            onClick={() => onPick(stop)}
          />
        ))}
      </div>
    </nav>
  )
}