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

import {render, screen, userEvent} from '../../test-utils'

import {FavoriteButton} from './favorite-button'

describe('FavoriteButton', () => {
  it('renders unfilled state by default', () => {
    render(<FavoriteButton />)

    const button = screen.getByRole('button')
    expect(button).toBeInTheDocument()
    expect(button).toHaveClass('bg-button-overlay/30')
  })

  it('renders filled state when filled prop is true', () => {
    render(<FavoriteButton filled />)

    const button = screen.getByRole('button')
    expect(button).toHaveClass('bg-primary')
  })

  it('handles click events', async () => {
    const handleClick = vi.fn()
    const user = userEvent.setup()

    render(<FavoriteButton onClick={handleClick} />)

    const button = screen.getByRole('button')
    await user.click(button)

    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('toggles between filled and unfilled states', async () => {
    const user = userEvent.setup()
    let isFilled = false
    const handleClick = vi.fn(() => {
      isFilled = !isFilled
    })

    const {rerender} = render(
      <FavoriteButton filled={isFilled} onClick={handleClick} />
    )

    const button = screen.getByRole('button')
    expect(button).toHaveClass('bg-button-overlay/30')

    await user.click(button)
    expect(handleClick).toHaveBeenCalledTimes(1)

    // Rerender with updated filled state
    rerender(<FavoriteButton filled onClick={handleClick} />)
    expect(button).toHaveClass('bg-primary')
  })
})