import { describe, expect, it } from "vitest"
import { render } from "@testing-library/react"
import { Dichteleiste } from "./Dichteleiste"
import type { ChronikItem } from "@/lib/api"

function eintrag(ts: number): ChronikItem {
  return { id: ts, ts, subject: "x", text: "y", source: "test", priority: "normal" }
}

/** Die Balken der Leiste (ohne die Achsen-Beschriftung darunter). */
function balken(container: HTMLElement): HTMLElement[] {
  return [...container.querySelectorAll('[role="img"] > div')] as HTMLElement[]
}

describe("Dichteleiste", () => {
  it("zeigt nichts, wenn es nichts zu zeigen gibt", () => {
    const { container } = render(<Dichteleiste items={[]} />)
    expect(container).toBeEmptyDOMElement()
  })

  it("verteilt die Einträge über die volle Breite", () => {
    const basis = 1_800_000_000
    const items = [eintrag(basis), eintrag(basis + 43_200), eintrag(basis + 86_400)]
    const { container } = render(<Dichteleiste items={items} />)
    const b = balken(container)
    expect(b).toHaveLength(48)
    // Erster, mittlerer und letzter Eimer sind belegt — dazwischen ist es leer.
    expect(b[0].style.height).not.toBe("2px")
    expect(b[47].style.height).not.toBe("2px")
    expect(b[5].style.height).toBe("2px")
  })

  // Ohne Mindesthöhe sähe ein ruhiger Tag aus wie gar keine Aktivität — genau die
  // Verwechslung, die die Leiste verhindern soll.
  it("macht auch einen einzelnen Eintrag sichtbar", () => {
    const { container } = render(<Dichteleiste items={[eintrag(1_800_000_000)]} />)
    const belegt = balken(container).filter((d) => d.style.height !== "2px")
    expect(belegt).toHaveLength(1)
    expect(parseFloat(belegt[0].style.height)).toBeGreaterThanOrEqual(12)
  })

  it("beschriftet sich für Screenreader mit Anzahl und Zeitraum", () => {
    const basis = 1_800_000_000
    const { container } = render(<Dichteleiste items={[eintrag(basis), eintrag(basis + 86_400)]} />)
    const label = container.querySelector('[role="img"]')!.getAttribute("aria-label")!
    expect(label).toMatch(/2 Einträge/)
    expect(label).toMatch(/zwischen .* und /)
  })

  it("hebt die Leiste hervor, solange gefiltert wird", () => {
    const items = [eintrag(1_800_000_000)]
    const normal = render(<Dichteleiste items={items} />).container
    const gefiltert = render(<Dichteleiste items={items} aktiv />).container
    const klasse = (c: HTMLElement) =>
      balken(c).find((d) => d.style.height !== "2px")!.className
    expect(klasse(normal)).toMatch(/primary\/40/)
    expect(klasse(gefiltert)).toMatch(/primary\/70/)
  })
})