import { describe, it, expect, vi } from 'vitest'
import { render } from '@testing-library/react'
import { Spread } from './spread'
import { Provider } from '../provider/widget-provider'
import type { SpreadWidgetData } from './types'

vi.mock('./spread-ui', () => ({
  SpreadUI: ({
    items,
    formatter,
  }: {
    items: SpreadWidgetData
    formatter?: (value: number) => string
  }) => (
    <div data-testid='spread-ui' data-count={items.length}>
      {items
        .map(
          (it) =>
            `${formatter ? formatter(it.min) : it.min}—${formatter ? formatter(it.max) : it.max}`,
        )
        .join('|')}
    </div>
  ),
}))

describe('<Spread> bridge', () => {
  it('forwards data + formatter to SpreadUI', () => {
    const data: SpreadWidgetData = [
      { min: 1, max: 9 },
      { min: 0, max: 10 },
    ]
    const { getByTestId } = render(
      <Provider id='sp-1' data={data} formatter={(n) => `${n}k`}>
        <Spread />
      </Provider>,
    )
    const ui = getByTestId('spread-ui')
    expect(ui.dataset.count).toBe('2')
    expect(ui.textContent).toBe('1k—9k|0k—10k')
  })

  it('renders zero items when data is null', () => {
    const { getByTestId } = render(
      <Provider id='sp-2' data={null}>
        <Spread />
      </Provider>,
    )
    expect(getByTestId('spread-ui').dataset.count).toBe('0')
  })
})