import { parseAspectRatio, getImageUri, TemplateCard } from './TemplateCard'

describe('TemplateCard Utilities', () => {
  describe('parseAspectRatio', () => {
    it('should parse "128:128" to 1', () => {
      expect(parseAspectRatio('128:128')).toBe(1)
    })

    it('should parse "16:9" to approximately 1.777', () => {
      const result = parseAspectRatio('16:9')
      expect(result).toBeCloseTo(16 / 9, 5)
    })

    it('should parse "9:16" to approximately 0.5625', () => {
      const result = parseAspectRatio('9:16')
      expect(result).toBeCloseTo(9 / 16, 5)
    })

    it('should parse "1.5" to 1.5', () => {
      expect(parseAspectRatio('1.5')).toBe(1.5)
    })

    it('should parse "2" to 2', () => {
      expect(parseAspectRatio('2')).toBe(2)
    })

    it('should return undefined for undefined input', () => {
      expect(parseAspectRatio(undefined)).toBeUndefined()
    })

    it('should return undefined for empty string', () => {
      expect(parseAspectRatio('')).toBeUndefined()
    })
  })

  describe('getImageUri', () => {
    it('should prioritize webpPreviewUrl over previewUrl', () => {
      const result = getImageUri(
        'https://example.com/preview.webp',
        'https://example.com/preview.jpg',
        'https://example.com/cover.jpg'
      )
      expect(result).toBe('https://example.com/preview.webp')
    })

    it('should use previewUrl when webpPreviewUrl is not provided', () => {
      const result = getImageUri(
        undefined,
        'https://example.com/preview.jpg',
        'https://example.com/cover.jpg'
      )
      expect(result).toBe('https://example.com/preview.jpg')
    })

    it('should use coverImageUrl as fallback', () => {
      const result = getImageUri(
        undefined,
        undefined,
        'https://example.com/cover.jpg'
      )
      expect(result).toBe('https://example.com/cover.jpg')
    })

    it('should return undefined when no URLs are provided', () => {
      const result = getImageUri(undefined, undefined, undefined)
      expect(result).toBeUndefined()
    })
  })
})

describe('TemplateCard Component', () => {
  describe('Memo Optimization', () => {
    it('should be wrapped with React.memo', () => {
      // TemplateCard should be a memoized component
      expect(TemplateCard).toBeDefined()
      // React.memo wraps the component, so we check if it's a valid element type
      expect(typeof TemplateCard).toBe('object')
    })
  })

  describe('Multi-language support', () => {
    it('should display Chinese title when language is zh-CN', () => {
      const title = '测试模板'
      const titleEn = 'Test Template'
      const language = 'zh-CN'

      // 根据语言选择显示的标题
      const displayTitle = language === 'en-US' ? titleEn : title

      expect(displayTitle).toBe('测试模板')
    })

    it('should display English title when language is en-US', () => {
      const title = '测试模板'
      const titleEn = 'Test Template'
      const language = 'en-US'

      // 根据语言选择显示的标题
      const displayTitle = language === 'en-US' ? titleEn : title

      expect(displayTitle).toBe('Test Template')
    })

    it('should fallback to Chinese title when titleEn is missing', () => {
      const title = '测试模板'
      const titleEn = undefined
      const language = 'en-US'

      // 当 titleEn 不存在时，回退到中文标题
      const displayTitle = language === 'en-US' && titleEn ? titleEn : title

      expect(displayTitle).toBe('测试模板')
    })

    it('should fallback to Chinese title when titleEn is empty string', () => {
      const title = '测试模板'
      const titleEn = ''
      const language = 'en-US'

      // 当 titleEn 为空字符串时，回退到中文标题
      const displayTitle = language === 'en-US' && titleEn ? titleEn : title

      expect(displayTitle).toBe('测试模板')
    })
  })
})