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

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

import {ImageContentWrapper} from './image-content-wrapper'

// Mock ContentWrapper component
vi.mock('../atoms/content-wrapper', () => ({
  ContentWrapper: vi.fn(({children}: any) => {
    // Simulate content loaded state
    return children({
      content: {
        title: 'Test Image',
        image: {
          url: 'https://example.com/image.jpg',
          thumbhash: 'testThumbhash',
          width: 800,
          height: 600,
        },
      },
      loading: false,
    })
  }),
}))

// Mock Image component
vi.mock('../atoms/image', () => ({
  Image: vi.fn((props: any) => (
    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
    <img
      src={props.src}
      alt={props.alt}
      width={props.width}
      height={props.height}
      className={props.className}
      onLoad={props.onLoad}
      data-testid="mocked-image"
      style={{aspectRatio: props.aspectRatio}}
    />
  )),
}))

describe('ImageContentWrapper', () => {
  it('renders image with publicId', () => {
    render(<ImageContentWrapper publicId="test-public-id" />)

    const image = screen.getByTestId('mocked-image')
    expect(image).toBeInTheDocument()
    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg')
    expect(image).toHaveAttribute('alt', 'Test Image')
  })

  it('renders image with externalId', () => {
    render(<ImageContentWrapper externalId="test-external-id" />)

    const image = screen.getByTestId('mocked-image')
    expect(image).toBeInTheDocument()
    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg')
  })

  it('passes dimensions to image', () => {
    render(<ImageContentWrapper publicId="test-id" width={400} height={300} />)

    const image = screen.getByTestId('mocked-image')
    expect(image).toHaveAttribute('width', '400')
    expect(image).toHaveAttribute('height', '300')
  })

  it('calculates and applies aspect ratio', () => {
    render(<ImageContentWrapper publicId="test-id" />)

    const image = screen.getByTestId('mocked-image')
    // 800/600 = 1.333...
    expect(image.style.aspectRatio).toBe('1.3333333333333333')
  })

  it('handles onLoad callback', () => {
    const handleLoad = vi.fn()
    render(<ImageContentWrapper publicId="test-id" onLoad={handleLoad} />)

    // Verify that onLoad is passed through to the Image component
    const image = screen.getByTestId('mocked-image')
    expect(image).toBeInTheDocument()
  })

  it('applies custom className', () => {
    render(<ImageContentWrapper publicId="test-id" className="custom-class" />)

    const image = screen.getByTestId('mocked-image')
    expect(image).toHaveClass('custom-class')
  })
})