import { describe, expect, test } from 'vitest'
import { render, within } from '@testing-library/react'
import { NoDataAlert } from './no-data-alert'

describe('NoDataAlert', () => {
  test('with default props', () => {
    const { container } = render(<NoDataAlert />)

    const title = within(container).queryByText('No data available')
    const body = within(container).queryByText(
      'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust the Map View.',
    )

    expect(title).toBeTruthy()
    expect(body).toBeTruthy()
  })

  test('with custom title', () => {
    const { container } = render(<NoDataAlert title='Custom title' />)

    const title = within(container).queryByText('Custom title')
    expect(title).toBeTruthy()
  })

  test('with custom body', () => {
    const { container } = render(<NoDataAlert body='Custom body' />)

    const body = within(container).queryByText('Custom body')
    expect(body).toBeTruthy()
  })

  test('renders an MUI Alert when severity is provided (alternative render branch)', () => {
    const { container } = render(<NoDataAlert severity='warning' />)
    // MUI Alert renders an element with role="alert"
    expect(container.querySelector('[role="alert"]')).not.toBeNull()
  })

  test('severity=info renders the info-styled alert', () => {
    const { container } = render(
      <NoDataAlert severity='info' body='Heads up' />,
    )
    expect(container.querySelector('[role="alert"]')).not.toBeNull()
    expect(within(container).queryByText('Heads up')).toBeTruthy()
  })

  test('omits the Typography title when title is an empty string', () => {
    const { container } = render(<NoDataAlert title='' body='Body text' />)
    // Default title text should not render
    expect(within(container).queryByText('No data available')).toBeNull()
    // Body still renders
    expect(within(container).queryByText('Body text')).toBeTruthy()
  })

  test('AlertBody renders an empty spacer when body is empty', () => {
    // Empty body → AlertBody returns <Box mt={-1} /> branch
    const { container } = render(<NoDataAlert body='' />)
    // No body text content
    expect(within(container).queryByText(/There are no results/)).toBeNull()
    // Box element still present
    expect(container.querySelector('div')).not.toBeNull()
  })

  test('AlertBody honours custom color via the severity branch', () => {
    // The non-severity branch passes color="textSecondary" to AlertBody.
    // The severity branch omits color, hitting the `color ?? "inherit"` fallback.
    const { container } = render(<NoDataAlert severity='error' body='Err' />)
    expect(within(container).queryByText('Err')).toBeTruthy()
  })
})