import { describe, test, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { Actions } from './actions'

describe('Actions', () => {
  test('renders with empty actions array', () => {
    const { container } = render(<Actions actions={[]} />)
    expect(container.firstChild).toBeTruthy()
  })

  test('renders with undefined actions', () => {
    const { container } = render(<Actions />)
    expect(container.firstChild).toBeTruthy()
  })

  test('renders single action', () => {
    const actions = [<button key='action1'>Action 1</button>]
    render(<Actions actions={actions} />)
    expect(screen.getByText('Action 1')).toBeTruthy()
  })

  test('renders multiple actions', () => {
    const actions = [
      <button key='action1'>Action 1</button>,
      <button key='action2'>Action 2</button>,
      <button key='action3'>Action 3</button>,
    ]
    render(<Actions actions={actions} />)
    expect(screen.getByText('Action 1')).toBeTruthy()
    expect(screen.getByText('Action 2')).toBeTruthy()
    expect(screen.getByText('Action 3')).toBeTruthy()
  })

  test('stops event propagation on click', () => {
    const onClick = vi.fn()
    const parentOnClick = vi.fn()

    const actions = [
      <button key='action1' onClick={onClick}>
        Action 1
      </button>,
    ]

    render(
      <div
        role='button'
        tabIndex={0}
        onClick={parentOnClick}
        onKeyDown={parentOnClick}
      >
        <Actions actions={actions} />
      </div>,
    )

    const button = screen.getByText('Action 1')
    fireEvent.click(button)

    // The action's onClick should fire
    expect(onClick).toHaveBeenCalledTimes(1)
    // But parent onClick should not fire due to stopPropagation
    expect(parentOnClick).not.toHaveBeenCalled()
  })

  test('renders actions with different types of elements', () => {
    const actions = [
      <button key='button'>Button</button>,
      <button key='link'>Link</button>,
      <span key='span'>Span</span>,
    ]
    render(<Actions actions={actions} />)
    expect(screen.getByText('Button')).toBeTruthy()
    expect(screen.getByText('Link')).toBeTruthy()
    expect(screen.getByText('Span')).toBeTruthy()
  })

  test('wraps each action in a Box with correct key', () => {
    const actions = [
      <button key='action1'>Action 1</button>,
      <button key='action2'>Action 2</button>,
    ]
    const { container } = render(<Actions actions={actions} />)

    // Check that actions are rendered
    expect(screen.getByText('Action 1')).toBeTruthy()
    expect(screen.getByText('Action 2')).toBeTruthy()

    // The container should have the actions box
    expect(container.firstChild).toBeTruthy()
  })

  test('handles complex action components', () => {
    const ComplexAction = () => (
      <div>
        <span>Complex</span>
        <button>Action</button>
      </div>
    )

    const actions = [<ComplexAction key='complex' />]
    render(<Actions actions={actions} />)

    expect(screen.getByText('Complex')).toBeTruthy()
    expect(screen.getByText('Action')).toBeTruthy()
  })
})