import { describe, test, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Item } from './item'

describe('Item', () => {
  test('renders string children', () => {
    render(<Item>Test Content</Item>)
    expect(screen.getByText('Test Content')).toBeTruthy()
  })

  test('renders numeric children', () => {
    render(<Item>{123}</Item>)
    expect(screen.getByText('123')).toBeTruthy()
  })

  test('renders ReactNode children', () => {
    render(
      <Item>
        <span>Complex</span> <strong>Content</strong>
      </Item>,
    )
    expect(screen.getByText('Complex')).toBeTruthy()
    expect(screen.getByText('Content')).toBeTruthy()
  })

  test('renders as Typography with h5 variant', () => {
    render(<Item>Content</Item>)
    const element = screen.getByText('Content')
    expect(element.tagName).toBe('H5')
  })

  test('applies medium font weight', () => {
    render(<Item>Content</Item>)
    const element = screen.getByText('Content')
    expect(element.classList.contains('MuiTypography-root')).toBe(true)
  })

  test('applies default color', () => {
    render(<Item>Content</Item>)
    const element = screen.getByText('Content')
    // Color is passed as a prop to Typography, not an HTML attribute
    expect(element).toBeTruthy()
  })

  test('sets data-disabled attribute when disabled is true', () => {
    render(<Item disabled={true}>Content</Item>)
    const element = screen.getByText('Content')
    expect(element.getAttribute('data-disabled')).toBe('true')
  })

  test('does not set data-disabled attribute when disabled is false', () => {
    render(<Item disabled={false}>Content</Item>)
    const element = screen.getByText('Content')
    expect(element.getAttribute('data-disabled')).toBe('false')
  })

  test('does not set data-disabled attribute when disabled is undefined', () => {
    render(<Item>Content</Item>)
    const element = screen.getByText('Content')
    // When undefined, data-disabled is not set or set to null/false
    expect(element.getAttribute('data-disabled')).toBeFalsy()
  })

  test('accepts custom TypographyProps color', () => {
    render(<Item TypographyProps={{ color: 'primary' }}>Content</Item>)
    const element = screen.getByText('Content')
    // Color is passed as a prop, not an HTML attribute
    expect(element).toBeTruthy()
  })

  test('accepts custom TypographyProps variant', () => {
    render(<Item TypographyProps={{ variant: 'h6' }}>Content</Item>)
    const element = screen.getByText('Content')
    // Custom variant should override default h5
    expect(element.tagName).toBe('H6')
  })

  test('accepts custom TypographyProps className', () => {
    render(<Item TypographyProps={{ className: 'custom-class' }}>Content</Item>)
    const element = screen.getByText('Content')
    expect(element.classList.contains('custom-class')).toBe(true)
  })

  test('accepts custom TypographyProps sx', () => {
    render(<Item TypographyProps={{ sx: { fontSize: 20 } }}>Content</Item>)
    const element = screen.getByText('Content')
    expect(element).toBeTruthy()
  })

  test('accepts custom TypographyProps fontWeight', () => {
    render(<Item TypographyProps={{ fontWeight: 'bold' }}>Content</Item>)
    const element = screen.getByText('Content')
    expect(element).toBeTruthy()
  })

  test('handles empty string children', () => {
    const { container } = render(<Item>{''}</Item>)
    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
  })

  test('handles zero as children', () => {
    render(<Item>{0}</Item>)
    expect(screen.getByText('0')).toBeTruthy()
  })

  test('handles negative numbers as children', () => {
    render(<Item>{-100}</Item>)
    expect(screen.getByText('-100')).toBeTruthy()
  })

  test('handles decimal numbers as children', () => {
    render(<Item>{123.456}</Item>)
    expect(screen.getByText('123.456')).toBeTruthy()
  })

  test('handles large numbers as children', () => {
    render(<Item>{1000000}</Item>)
    expect(screen.getByText('1000000')).toBeTruthy()
  })

  test('combines disabled and custom TypographyProps', () => {
    render(
      <Item disabled={true} TypographyProps={{ color: 'error' }}>
        Content
      </Item>,
    )
    const element = screen.getByText('Content')
    expect(element.getAttribute('data-disabled')).toBe('true')
    // Color is passed as a prop, not an HTML attribute
    expect(element).toBeTruthy()
  })

  test('applies Typography classes', () => {
    render(<Item>Content</Item>)
    const element = screen.getByText('Content')
    expect(element.classList.contains('MuiTypography-root')).toBe(true)
    expect(element.classList.contains('MuiTypography-h5')).toBe(true)
  })

  test('handles null children', () => {
    const { container } = render(<Item>{null}</Item>)
    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
  })

  test('handles undefined children', () => {
    const { container } = render(<Item>{undefined}</Item>)
    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
  })

  test('handles multiple children elements', () => {
    render(
      <Item>
        <span>First</span>
        <span>Second</span>
        <span>Third</span>
      </Item>,
    )
    expect(screen.getByText('First')).toBeTruthy()
    expect(screen.getByText('Second')).toBeTruthy()
    expect(screen.getByText('Third')).toBeTruthy()
  })

  test('handles mixed children types', () => {
    render(
      <Item>
        Text <span>Element</span> {123}
      </Item>,
    )
    expect(screen.getByText(/Text/)).toBeTruthy()
    expect(screen.getByText('Element')).toBeTruthy()
    expect(screen.getByText(/123/)).toBeTruthy()
  })

  test('handles deeply nested children', () => {
    render(
      <Item>
        <div>
          <span>
            <strong>Nested</strong>
          </span>
        </div>
      </Item>,
    )
    expect(screen.getByText('Nested')).toBeTruthy()
  })

  test('handles special characters in children', () => {
    render(<Item>Special: @#$%^&*()</Item>)
    expect(screen.getByText(/Special: @#\$%\^&\*\(\)/)).toBeTruthy()
  })

  test('handles long text content', () => {
    const longText = 'A'.repeat(1000)
    render(<Item>{longText}</Item>)
    expect(screen.getByText(longText)).toBeTruthy()
  })

  test('handles unicode characters', () => {
    render(<Item>Unicode: 你好 🌍</Item>)
    expect(screen.getByText(/Unicode: 你好 🌍/)).toBeTruthy()
  })

  test('merges custom TypographyProps with default props', () => {
    render(
      <Item
        TypographyProps={{
          color: 'secondary',
          variant: 'body1',
          className: 'custom',
        }}
      >
        Content
      </Item>,
    )
    const element = screen.getByText('Content')
    // Color is passed as a prop, not an HTML attribute
    expect(element.classList.contains('custom')).toBe(true)
    // variant body1 uses p tag
    expect(element.tagName).toBe('P')
  })

  test('TypographyProps can override fontWeight', () => {
    render(<Item TypographyProps={{ fontWeight: 'light' }}>Content</Item>)
    const element = screen.getByText('Content')
    expect(element).toBeTruthy()
  })

  test('renders with all props combined', () => {
    render(
      <Item
        disabled={true}
        TypographyProps={{
          color: 'primary',
          variant: 'h6',
          fontWeight: 'bold',
          className: 'test-class',
          sx: { fontSize: 24 },
        }}
      >
        Full Test
      </Item>,
    )
    const element = screen.getByText('Full Test')
    expect(element.getAttribute('data-disabled')).toBe('true')
    // Color is passed as a prop, not an HTML attribute
    expect(element.tagName).toBe('H6')
    expect(element.classList.contains('test-class')).toBe(true)
  })
})