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

import Image from './Image'

describe('Image', () => {
  describe('Basic Rendering', () => {
    it('renders with default props and shows icon when no URL provided', () => {
      render(<Image />)
      expect(screen.getByTestId('image')).toBeInTheDocument()
      expect(screen.getByTestId('icon-picture')).toBeInTheDocument()
    })

    it('renders image when URL is provided', () => {
      const url = 'https://example.com/image.jpg'
      render(<Image url={url} />)
      const img = screen.getByRole('img')
      expect(img).toHaveAttribute('src', url)
      expect(img).toHaveAttribute('alt', 'Product')
    })

    it('renders with custom alt text', () => {
      const altText = 'Custom alt text'
      render(<Image url='https://example.com/image.jpg' alt={altText} />)
      expect(screen.getByRole('img')).toHaveAttribute('alt', altText)
    })
  })

  describe('Styling', () => {
    it('applies custom container class', () => {
      const containerClass = 'custom-container'
      render(<Image containerClass={containerClass} />)
      expect(screen.getByTestId('image')).toHaveClass(containerClass)
    })

    it('applies custom image class', () => {
      const imageClass = 'custom-image'
      render(
        <Image url='https://example.com/image.jpg' imageClass={imageClass} />,
      )
      expect(screen.getByRole('img')).toHaveClass(imageClass)
    })

    it('applies custom container styles', () => {
      const style = { padding: '10px' }
      render(<Image style={style} />)
      const container = screen.getByTestId('image')
      expect(container).toHaveStyle(style)
    })

    it('applies custom image styles', () => {
      const imgStyle = { opacity: 0.5, width: '200px' }
      render(<Image url='test.jpg' imgStyle={imgStyle} />)
      const img = screen.getByRole('img')
      expect(img).toHaveStyle({
        ...imgStyle,
        maxWidth: '100%',
        maxHeight: '100%',
      })
    })
  })

  describe('Icon Size', () => {
    it('uses default icon size of 40px', () => {
      render(<Image />)
      const icon = screen.getByTestId('icon-picture')
      expect(icon).toHaveStyle({ '--svg-height': '40px' })
    })

    it('uses custom icon size as string', () => {
      const iconSize = '60px'
      render(<Image iconSize={iconSize} />)
      const icon = screen.getByTestId('icon-picture')
      expect(icon).toHaveStyle({ '--svg-height': iconSize })
    })
  })

  describe('Error Handling', () => {
    it('handles image load error and shows fallback', () => {
      render(<Image url='invalid-url.jpg' />)
      const img = screen.getByRole('img')

      fireEvent.error(img)

      expect(img).toHaveAttribute(
        'src',
        'https://images.pattern.com/library/bad-image.svg',
      )
      expect(img).toHaveAttribute('alt', 'No Image')
    })
  })

  describe('Edge Cases', () => {
    it('handles empty URL string', () => {
      render(<Image url='' />)
      expect(screen.getByTestId('icon-picture')).toBeInTheDocument()
    })

    it('handles undefined URL', () => {
      render(<Image url={undefined} />)
      expect(screen.getByTestId('icon-picture')).toBeInTheDocument()
    })
  })
})