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

import Icon from './Icon'
import { type IconComponentProps } from './Icon.models'

function FakeIcon({ width, height, style }: IconComponentProps) {
  return (
    <svg
      data-testid='fake-icon-svg'
      width={width}
      height={height}
      style={style}
    />
  )
}

describe('Icon Component', () => {
  it('renders with default props', () => {
    render(<Icon icon='check' />)
    const iconElement = screen.getByTestId('icon-check')
    expect(iconElement).toBeInTheDocument()
    expect(iconElement).toHaveStyle({
      '--svg-height': '20px',
      '--svg-width': '20px',
      '--svg-color': 'var(--purple)',
    })
  })

  it('renders with custom iconSize', () => {
    render(<Icon icon='check' iconSize='24px' />)
    const iconElement = screen.getByTestId('icon-check')
    expect(iconElement).toHaveStyle({
      '--svg-height': '24px',
      '--svg-width': '24px',
    })
  })

  it('renders with custom color', () => {
    render(<Icon icon='check' color='dark-blue' />)
    const iconElement = screen.getByTestId('icon-check')
    expect(iconElement).toHaveStyle({
      '--svg-color': 'var(--dark-blue)',
    })
  })

  it('renders with custom className', () => {
    render(<Icon icon='check' className='custom-class' />)
    const iconElement = screen.getByTestId('icon-check')
    expect(iconElement).toHaveClass('custom-class')
  })

  it('renders different icons correctly', () => {
    const { rerender } = render(<Icon icon='check' />)
    expect(screen.getByTestId('icon-check')).toBeInTheDocument()

    rerender(<Icon icon='x' />)
    expect(screen.getByTestId('icon-x')).toBeInTheDocument()

    rerender(<Icon icon='info' />)
    expect(screen.getByTestId('icon-info')).toBeInTheDocument()
  })

  describe('component icon', () => {
    it('renders a component icon with correct size props', () => {
      render(<Icon icon={FakeIcon} iconSize='24px' />)
      const svg = screen.getByTestId('fake-icon-svg')
      expect(svg).toBeInTheDocument()
      expect(svg).toHaveAttribute('width', '24px')
      expect(svg).toHaveAttribute('height', '24px')
    })

    it('applies color as CSS color property', () => {
      render(<Icon icon={FakeIcon} color='dark-red' />)
      const wrapper = screen.getByTestId('icon-icon')
      expect(wrapper).toHaveStyle({ color: 'var(--dark-red)' })
    })

    it('uses qaTestId for a stable data-testid', () => {
      render(<Icon icon={FakeIcon} qaTestId='accessibility' />)
      expect(screen.getByTestId('icon-accessibility')).toBeInTheDocument()
    })

    it('applies base wrapper classes and custom className', () => {
      render(<Icon icon={FakeIcon} className='extra' />)
      const wrapper = screen.getByTestId('icon-icon')
      expect(wrapper).toHaveClass('icon', 'extra')
    })
  })
})