import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { CategoryBar } from './category-bar'

describe('<CategoryBar>', () => {
  function getFill(container: HTMLElement): HTMLElement | null {
    return container.querySelector('div[style*="width:"]')
  }

  it('fills proportionally to value / maxValue', () => {
    const { container } = render(
      <CategoryBar value={25} maxValue={100} color='rgb(0, 0, 0)' />,
    )
    const fill = getFill(container)
    expect(fill).toBeTruthy()
    expect(fill!.style.width).toBe('25%')
  })

  it('renders an empty bar when maxValue is 0 (no division by zero)', () => {
    const { container } = render(
      <CategoryBar value={5} maxValue={0} color='rgb(0, 0, 0)' />,
    )
    const fill = getFill(container)
    expect(fill!.style.width).toBe('0%')
  })

  it('honors color prop as the bar background', () => {
    const { container } = render(
      <CategoryBar value={50} maxValue={100} color='rgb(255, 128, 0)' />,
    )
    const fill = getFill(container)
    expect(fill!.style.backgroundColor).toBe('rgb(255, 128, 0)')
  })

  it('100% fill when value equals maxValue', () => {
    const { container } = render(
      <CategoryBar value={100} maxValue={100} color='rgb(0, 0, 0)' />,
    )
    expect(getFill(container)!.style.width).toBe('100%')
  })

  it('defaults to size=small (data-size="small" on the track)', () => {
    const { container } = render(
      <CategoryBar value={50} maxValue={100} color='rgb(0, 0, 0)' />,
    )
    const track = container.querySelector('[data-size]')
    expect(track).toBeTruthy()
    expect(track!.getAttribute('data-size')).toBe('small')
  })

  it('renders data-size="medium" when size="medium"', () => {
    const { container } = render(
      <CategoryBar
        value={50}
        maxValue={100}
        color='rgb(0, 0, 0)'
        size='medium'
      />,
    )
    const track = container.querySelector('[data-size]')
    expect(track).toBeTruthy()
    expect(track!.getAttribute('data-size')).toBe('medium')
  })
})