import type { BlockBox } from './scrollPosition'
import type { DocumentMessage } from './types'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import { anchorAt, scrollTopFor } from './scrollPosition'
import { postMessage, viewState } from './vscode'

/** 滚动时最多这么久记一次位置 */
const RECORD_INTERVAL_MS = 100

/** 顶部钉住的筛选栏的高度：视口里露出块的部分从它下面开始，记位置、滚过去都按这部分算。 */
export function pinnedHeight(): number {
  return document.querySelector<HTMLElement>('.cr-filter-bar')?.offsetHeight ?? 0
}

/** 筛选栏有多高，跟着它变（换行、多出第二行时）：钉在它下面的东西（总览条、钉住的外层卡片）从这儿开始。 */
export function usePinnedHeight(): number {
  const [height, setHeight] = useState(0)
  useLayoutEffect(() => {
    const bar = document.querySelector<HTMLElement>('.cr-filter-bar')
    if (!bar)
      return
    setHeight(bar.offsetHeight)
    const observer = new ResizeObserver(() => setHeight(bar.offsetHeight))
    observer.observe(bar)
    return () => observer.disconnect()
  }, [])
  return height
}

/** 页面上每块（BlockCard 带 data-line）的位置，按页面上的先后；被筛掉的块不在页面上，不算。 */
export function measureBlocks(): BlockBox[] {
  const y = window.scrollY
  return Array.from(document.querySelectorAll<HTMLElement>('.cr-block[data-line]'), (el) => {
    const rect = el.getBoundingClientRect()
    return { line: Number(el.dataset.line), top: rect.top + y, bottom: rect.bottom + y }
  })
}

/** 记下视口顶部那块；它的起始行变了才报给扩展端。 */
function record(reportedLine: { current: number | undefined }): void {
  const anchor = anchorAt(measureBlocks(), window.scrollY + pinnedHeight())
  if (!anchor)
    return
  viewState.update({ scroll: anchor })
  if (anchor.line !== reportedLine.current) {
    reportedLine.current = anchor.line
    postMessage({ type: 'visibleLine', line: anchor.line })
  }
}

/**
 * 记住并恢复预览看到的位置：
 * ① 滚动时把视口顶部那块记进 webview 状态，页面因标签页切走被重新加载后照着滚回去；
 * ② 同时把那块的起始行报给扩展端，切回文本编辑器时把这行放到顶部。
 * 第一份文档带 reveal（刚从文本编辑器切过来、跳到定义）时不恢复，交给 useReveal 滚。
 */
export function useScrollPosition(doc: DocumentMessage | null): void {
  const restored = useRef(false)
  const reportedLine = useRef<number | undefined>(undefined)

  // 第一份文档渲染进 DOM 后、浏览器绘制前滚好，不会先闪一下顶部
  useLayoutEffect(() => {
    if (!doc || restored.current)
      return
    restored.current = true
    const saved = viewState.get().scroll
    const top = doc.reveal === undefined && saved ? scrollTopFor(measureBlocks(), saved) : undefined
    if (top !== undefined)
      window.scrollTo(0, top - pinnedHeight())
    record(reportedLine)
  }, [doc])

  useEffect(() => {
    let timer: number | undefined
    const onScroll = (): void => {
      timer ??= window.setTimeout(() => {
        timer = undefined
        record(reportedLine)
      }, RECORD_INTERVAL_MS)
    }
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => {
      window.removeEventListener('scroll', onScroll)
      window.clearTimeout(timer)
    }
  }, [])
}