import { TemplateGrid, calculateCardWidth } from './TemplateGrid'

describe('TemplateGrid Component', () => {
  describe('Component Export', () => {
    it('should be defined', () => {
      expect(TemplateGrid).toBeDefined()
    })

    it('should be a function component (wrapped with memo)', () => {
      // memo() returns an object with a type property that is the original function
      expect(typeof TemplateGrid).toBe('object')
      expect(TemplateGrid).toHaveProperty('$$typeof')
    })
  })

  describe('Props Interface', () => {
    it('should accept templates array prop', () => {
      const templates = [
        { id: '1', title: 'Template 1' },
        { id: '2', title: 'Template 2' },
      ]
      expect(Array.isArray(templates)).toBe(true)
    })

    it('should accept onTemplatePress callback', () => {
      const onTemplatePress = jest.fn()
      expect(typeof onTemplatePress).toBe('function')
    })

    it('should accept optional numColumns prop', () => {
      const numColumns = 3
      expect(numColumns).toBe(3)
    })

    it('should accept optional horizontalPadding prop', () => {
      const horizontalPadding = 16
      expect(horizontalPadding).toBe(16)
    })

    it('should accept optional cardGap prop', () => {
      const cardGap = 5
      expect(cardGap).toBe(5)
    })
  })

  describe('Default Values', () => {
    it('should have default numColumns value of 3', () => {
      const defaultNumColumns = 3
      expect(defaultNumColumns).toBe(3)
    })

    it('should have default horizontalPadding value of 16', () => {
      const defaultHorizontalPadding = 16
      expect(defaultHorizontalPadding).toBe(16)
    })

    it('should have default cardGap value of 5', () => {
      const defaultCardGap = 5
      expect(defaultCardGap).toBe(5)
    })
  })

  describe('Empty Data Handling', () => {
    it('should return null when templates array is empty', () => {
      const templates: { id: string; title: string }[] = []
      // Component should return null for empty array
      expect(templates.length).toBe(0)
    })

    it('should return null when templates is undefined', () => {
      const templates = undefined
      expect(templates).toBeUndefined()
    })
  })

  describe('calculateCardWidth Helper', () => {
    it('should be defined', () => {
      expect(calculateCardWidth).toBeDefined()
    })

    it('should calculate card width correctly with default values', () => {
      // gridWidth = 375, horizontalPadding = 16, cardGap = 5, numColumns = 3
      // cardWidth = (375 - 16 * 2 - 5 * (3 - 1)) / 3 = (375 - 32 - 10) / 3 = 333 / 3 = 111
      const result = calculateCardWidth(375, 16, 5, 3)
      expect(result).toBe(111)
    })

    it('should calculate card width correctly with custom values', () => {
      // gridWidth = 400, horizontalPadding = 20, cardGap = 10, numColumns = 2
      // cardWidth = (400 - 20 * 2 - 10 * (2 - 1)) / 2 = (400 - 40 - 10) / 2 = 350 / 2 = 175
      const result = calculateCardWidth(400, 20, 10, 2)
      expect(result).toBe(175)
    })

    it('should handle single column layout', () => {
      // gridWidth = 300, horizontalPadding = 10, cardGap = 5, numColumns = 1
      // cardWidth = (300 - 10 * 2 - 5 * (1 - 1)) / 1 = (300 - 20 - 0) / 1 = 280
      const result = calculateCardWidth(300, 10, 5, 1)
      expect(result).toBe(280)
    })

    it('should return 0 when gridWidth is 0', () => {
      const result = calculateCardWidth(0, 16, 5, 3)
      expect(result).toBeLessThanOrEqual(0)
    })
  })

  describe('Template Interface', () => {
    it('should support required id and title fields', () => {
      const template = { id: '1', title: 'Test Template' }
      expect(template.id).toBe('1')
      expect(template.title).toBe('Test Template')
    })

    it('should support optional previewUrl field', () => {
      const template = { id: '1', title: 'Test', previewUrl: 'https://example.com/preview.jpg' }
      expect(template.previewUrl).toBe('https://example.com/preview.jpg')
    })

    it('should support optional webpPreviewUrl field', () => {
      const template = { id: '1', title: 'Test', webpPreviewUrl: 'https://example.com/preview.webp' }
      expect(template.webpPreviewUrl).toBe('https://example.com/preview.webp')
    })

    it('should support optional coverImageUrl field', () => {
      const template = { id: '1', title: 'Test', coverImageUrl: 'https://example.com/cover.jpg' }
      expect(template.coverImageUrl).toBe('https://example.com/cover.jpg')
    })

    it('should support optional aspectRatio field', () => {
      const template = { id: '1', title: 'Test', aspectRatio: '16:9' }
      expect(template.aspectRatio).toBe('16:9')
    })

    it('should support optional isLiked field', () => {
      const template = { id: '1', title: 'Test', isLiked: true }
      expect(template.isLiked).toBe(true)
    })

    it('should support optional isFavorited field', () => {
      const template = { id: '1', title: 'Test', isFavorited: true }
      expect(template.isFavorited).toBe(true)
    })

    it('should check for isLiked property using "in" operator', () => {
      const templateWithLike = { id: '1', title: 'Test', isLiked: true }
      const templateWithoutLike = { id: '2', title: 'Test' }
      expect('isLiked' in templateWithLike).toBe(true)
      expect('isLiked' in templateWithoutLike).toBe(false)
    })

    it('should check for isFavorited property using "in" operator', () => {
      const templateWithFavorite = { id: '1', title: 'Test', isFavorited: true }
      const templateWithoutFavorite = { id: '2', title: 'Test' }
      expect('isFavorited' in templateWithFavorite).toBe(true)
      expect('isFavorited' in templateWithoutFavorite).toBe(false)
    })
  })
})