import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { Series } from './series'
import { Value } from './value'
import { Note } from './note'
import { Prefix } from './prefix'
import { Suffix } from './suffix'
import { Delta } from './delta'

describe('<Series>', () => {
  it('renders the first letter of name as an Avatar', () => {
    const { getByLabelText } = render(<Series name='Revenue' />)
    const av = getByLabelText('Revenue')
    expect(av.textContent).toBe('R')
  })

  it('honours a custom size', () => {
    const { getByLabelText } = render(<Series name='Cogs' size={40} />)
    expect(getByLabelText('Cogs')).toBeTruthy()
  })

  it('passes a CSS colour through unchanged', () => {
    const { getByLabelText } = render(<Series name='X' color='#ff0000' />)
    expect(getByLabelText('X')).toBeTruthy()
  })

  it('resolves a dotted palette path to a concrete colour via the theme', () => {
    const { getByLabelText } = render(<Series name='Y' color='primary.main' />)
    expect(getByLabelText('Y')).toBeTruthy()
  })

  it('resolves a nested palette path (palette.warning.dark)', () => {
    const { getByLabelText } = render(<Series name='W' color='warning.dark' />)
    expect(getByLabelText('W')).toBeTruthy()
  })
})

describe('<Value>', () => {
  it('renders children', () => {
    const { getByText } = render(<Value>42</Value>)
    expect(getByText('42')).toBeTruthy()
  })

  it('applies the supplied color override', () => {
    const { getByText } = render(<Value color='success.main'>ok</Value>)
    expect(getByText('ok')).toBeTruthy()
  })
})

describe('<Note>', () => {
  it('renders children', () => {
    const { getByText } = render(<Note>last 7 days</Note>)
    expect(getByText('last 7 days')).toBeTruthy()
  })
})

describe('<Prefix>', () => {
  it('renders children', () => {
    const { getByText } = render(<Prefix>$</Prefix>)
    expect(getByText('$')).toBeTruthy()
  })
})

describe('<Suffix>', () => {
  it('renders children', () => {
    const { getByText } = render(<Suffix>%</Suffix>)
    expect(getByText('%')).toBeTruthy()
  })
})

describe('<Delta>', () => {
  it('infers positive severity from a positive value', () => {
    const { container } = render(<Delta value={0.12} />)
    // Default percent formatter with signDisplay='always'.
    expect(container.textContent).toContain('+12%')
    expect(container.querySelector('.MuiChip-colorSuccess')).not.toBeNull()
  })

  it('infers negative severity from a negative value', () => {
    const { container } = render(<Delta value={-0.05} />)
    expect(container.textContent).toContain('-5%')
    expect(container.querySelector('.MuiChip-colorError')).not.toBeNull()
  })

  it('infers neutral severity from zero', () => {
    const { container } = render(<Delta value={0} />)
    expect(container.textContent).toContain('+0%')
    expect(container.querySelector('.MuiChip-colorDefault')).not.toBeNull()
  })

  it('renders an explicit label, bypassing the formatter', () => {
    const { getByText } = render(<Delta value={-1} label='down a lot' />)
    expect(getByText('down a lot')).toBeTruthy()
  })

  it('uses a custom format() when provided', () => {
    const { container } = render(
      <Delta value={3.14} format={(v) => `${v.toFixed(2)}x`} />,
    )
    expect(container.textContent).toContain('3.14x')
  })

  it('honours an explicit severity override', () => {
    const { container } = render(<Delta value={5} severity='neutral' />)
    expect(container.querySelector('.MuiChip-colorDefault')).not.toBeNull()
  })
})