import { test, expect } from "bun:test"
import { Sprite, SpriteStyles } from "./sprite"

const baseProps = { src: "/test.png", frames: 4, frameDuration: 100, sheetWidth: 128, sheetHeight: 32 }

test("SpriteStyles renders global keyframe", () => {
  const html = (<SpriteStyles />).toString()
  expect(html).toContain("<style>")
  expect(html).toContain("@keyframes sprite")
  expect(html).toContain("var(--x)")
  expect(html).toContain("var(--ex)")
})

test("Sprite renders div with CSS variables", () => {
  const html = (<Sprite {...baseProps} />).toString()
  expect(html).toContain("<div")
  expect(html).toContain("--x:")
  expect(html).toContain("--y:")
  expect(html).toContain("--ex:")
})

test("Sprite uses correct frame count in animation", () => {
  const html = (<Sprite {...baseProps} frames={6} sheetWidth={192} />).toString()
  expect(html).toContain("steps(6)")
})

test("Sprite calculates duration from frames and frameDuration", () => {
  const html = (<Sprite {...baseProps} frames={4} frameDuration={150} />).toString()
  expect(html).toContain("600ms")
})

test("Sprite calculates frame dimensions from sheet size", () => {
  const html = (<Sprite {...baseProps} sheetWidth={128} sheetHeight={32} frames={4} />).toString()
  expect(html).toContain("width:32px")
  expect(html).toContain("height:32px")
})

test("Sprite passes through class", () => {
  const html = (<Sprite {...baseProps} class="my-sprite" />).toString()
  expect(html).toContain('class="my-sprite"')
})

test("Sprite passes through style", () => {
  const html = (<Sprite {...baseProps} style="opacity:0.5" />).toString()
  expect(html).toContain("opacity:0.5")
})

test("Sprite pauses when playing is false", () => {
  const html = (<Sprite {...baseProps} playing={false} />).toString()
  expect(html).toContain("animation-play-state:paused")
})

test("Sprite with crop uses crop dimensions for display size", () => {
  const html = (<Sprite {...baseProps} crop={{ x: 10, y: 5, width: 20, height: 25 }} />).toString()
  expect(html).toContain("width:20px")
  expect(html).toContain("height:25px")
})
