import { describe, expect, it } from 'vitest'

import { renderWithProviders, screen } from '../../../test/utils'

import Bubble from './Bubble'

describe('Bubble', () => {
  it.each([
    [undefined, false],
    [null, false],
    ['', false],
    ['caption', true],
    [0, true],
  ])('renders caption %j according to its value', (text, present) => {
    renderWithProviders(
      <Bubble variant="dark" text={text} data-testid="bubble">
        <span>child</span>
      </Bubble>
    )
    const bubble = screen.getByTestId('bubble')
    if (present) expect(bubble.querySelector('p')).not.toBeNull()
    else expect(bubble.querySelector('p')).toBeNull()
    expect(bubble).toHaveClass(present ? 'pb-0' : 'py-2')
  })

  it('maps variants, group positions, borders, and forwarded content', () => {
    const { rerender } = renderWithProviders(
      <Bubble
        variant="dark"
        groupPosition="middle"
        data-testid="bubble"
        className="custom"
      >
        child
      </Bubble>
    )
    let bubble = screen.getByTestId('bubble')
    expect(bubble).toHaveAttribute('data-group-position', 'middle')
    expect(bubble).toHaveClass('custom')
    expect(bubble).toHaveTextContent('child')
    const darkMiddle = bubble.className

    rerender(
      <Bubble
        variant="light"
        groupPosition="middle"
        data-testid="bubble"
        className="custom"
      >
        child
      </Bubble>
    )
    bubble = screen.getByTestId('bubble')
    const lightMiddle = bubble.className
    expect(lightMiddle).not.toBe(darkMiddle)

    rerender(
      <Bubble
        variant="light"
        groupPosition="first"
        data-testid="bubble"
        className="custom"
      >
        child
      </Bubble>
    )
    bubble = screen.getByTestId('bubble')
    expect(bubble.className).not.toBe(lightMiddle)
    const lightFirstBordered = bubble.className

    rerender(
      <Bubble
        variant="light"
        bordered={false}
        groupPosition="first"
        data-testid="bubble"
        className="custom"
      >
        child
      </Bubble>
    )
    bubble = screen.getByTestId('bubble')
    const lightFirstBorderless = bubble.className
    expect(lightFirstBorderless).not.toBe(lightFirstBordered)
    expect(lightFirstBordered.split(/\s+/)).toEqual(
      expect.arrayContaining(lightFirstBorderless.split(/\s+/))
    )
  })

  it('lets an explicit radius replace the group corner table', () => {
    const radiusClassName = 'rounded-[20px]'
    const widthClassName = 'w-fit'
    const paddingClassName = 'p-0.5'
    renderWithProviders(
      <Bubble
        variant="light"
        groupPosition="middle"
        radiusClassName={radiusClassName}
        widthClassName={widthClassName}
        paddingClassName={paddingClassName}
        data-testid="bubble"
      >
        child
      </Bubble>
    )
    const bubble = screen.getByTestId('bubble')
    expect(bubble).toHaveClass(radiusClassName, widthClassName)
    expect(bubble).toHaveClass(paddingClassName)
    expect(bubble.className).not.toMatch(/rounded-tl-\[4px\]/)
  })
})