import type { ComponentProps } from 'react'

import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'

import FallbackImage from '@/components/media/FallbackImage'

vi.mock('next/image', () => ({
  default: ({ alt, ...props }: ComponentProps<'img'>) => (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      {...props}
      alt={alt ?? ''}
    />
  ),
}))

afterEach(cleanup)

describe('FallbackImage', () => {
  it('uses the optimized image source and falls back after a load error', () => {
    render(
      <FallbackImage
        alt="رویداد"
        fallbackSrc="/fallback.avif"
        src="https://cdn.ghabilee.ir/poster.webp"
      />
    )

    const image = screen.getByRole('img', { name: 'رویداد' })

    expect(image).toHaveAttribute('src', 'https://cdn.ghabilee.ir/poster.webp')

    fireEvent.error(image)

    expect(image).toHaveAttribute('src', '/fallback.avif')
  })

  it('resets the rendered source when the source prop changes', async () => {
    const { rerender } = render(
      <FallbackImage
        alt="رویداد"
        fallbackSrc="/fallback.avif"
        src="/first.webp"
      />
    )

    rerender(
      <FallbackImage
        alt="رویداد"
        fallbackSrc="/fallback.avif"
        src="/second.webp"
      />
    )

    await waitFor(() => expect(screen.getByRole('img', { name: 'رویداد' })).toHaveAttribute('src', '/second.webp'))
  })
})