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

test("Sprite renders div with correct dimensions", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
  expect(html).toContain('width:32px')
  expect(html).toContain('height:32px')
})

test("Sprite sets background-image", () => {
  const html = (<Sprite src="/warrior.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
  expect(html).toContain("background-image:url(&#39;/warrior.png&#39;)")
})

test("Sprite calculates background-size for horizontal strip", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
  expect(html).toContain('background-size:128px 32px')
})

test("Sprite generates keyframes animation", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
  expect(html).toContain('@keyframes sprite-')
  expect(html).toContain('steps(4)')
  expect(html).toContain('400ms')
})

test("Sprite keyframes animate background-position", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
  expect(html).toContain('from{background-position:0 0}')
  expect(html).toContain('to{background-position:-128px 0}')
})

test("Sprite with columns calculates grid background-size", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={8} frameDuration={100} columns={4} />).toString()
  expect(html).toContain('background-size:128px 64px')
})

test("Sprite with columns generates grid keyframes", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} columns={2} />).toString()
  expect(html).toContain('0%{background-position:0px 0px}')
  expect(html).toContain('25%{background-position:-32px 0px}')
  expect(html).toContain('50%{background-position:0px -32px}')
  expect(html).toContain('75%{background-position:-32px -32px}')
})

test("Sprite passes through class", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} class="my-sprite" />).toString()
  expect(html).toContain('class="my-sprite"')
})

test("Sprite passes through style", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} style="opacity:0.5" />).toString()
  expect(html).toContain('opacity:0.5')
})

test("Sprite pauses when playing is false", () => {
  const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} playing={false} />).toString()
  expect(html).toContain('animation-play-state:paused')
})