import React from 'react'
import { render } from '@testing-library/react-native'
import { Text } from 'react-native'

import { MessageEmptyState } from './MessageEmptyState'

describe('MessageEmptyState Component', () => {
  describe('Default Rendering', () => {
    it('should render default message "暂无消息"', () => {
      const { getByText } = render(<MessageEmptyState />)
      expect(getByText('暂无消息')).toBeTruthy()
    })

    it('should render default icon', () => {
      const { getByTestId } = render(<MessageEmptyState />)
      expect(getByTestId('empty-state-icon')).toBeTruthy()
    })

    it('should render container with testID', () => {
      const { getByTestId } = render(<MessageEmptyState />)
      expect(getByTestId('message-empty-state')).toBeTruthy()
    })
  })

  describe('Custom Props', () => {
    it('should render custom message when provided', () => {
      const customMessage = '没有互动消息'
      const { getByText, queryByText } = render(
        <MessageEmptyState message={customMessage} />
      )
      expect(getByText(customMessage)).toBeTruthy()
      expect(queryByText('暂无消息')).toBeNull()
    })

    it('should render custom icon when provided', () => {
      const CustomIcon = <Text testID="custom-icon">🎨</Text>
      const { getByTestId } = render(<MessageEmptyState icon={CustomIcon} />)
      expect(getByTestId('custom-icon')).toBeTruthy()
    })

    it('should not render default icon when custom icon is provided', () => {
      const CustomIcon = <Text testID="custom-icon">🎨</Text>
      const { queryByTestId } = render(<MessageEmptyState icon={CustomIcon} />)
      // Custom icon container should exist, but default icon should be replaced
      expect(queryByTestId('custom-icon')).toBeTruthy()
    })
  })

  describe('Styling', () => {
    it('should have centered content', () => {
      const { getByTestId } = render(<MessageEmptyState />)
      const container = getByTestId('message-empty-state')

      // Check that container has centered alignment styles
      expect(container.props.style).toEqual(
        expect.objectContaining({
          alignItems: 'center',
          justifyContent: 'center',
        })
      )
    })

    it('should have transparent background', () => {
      const { getByTestId } = render(<MessageEmptyState />)
      const container = getByTestId('message-empty-state')

      expect(container.props.style).toEqual(
        expect.objectContaining({
          backgroundColor: 'transparent',
        })
      )
    })

    it('should have correct text color #8A8A8A', () => {
      const { getByTestId } = render(<MessageEmptyState />)
      const messageText = getByTestId('empty-state-message')

      expect(messageText.props.style).toEqual(
        expect.objectContaining({
          color: '#8A8A8A',
        })
      )
    })

    it('should have flex: 1 to fill available space', () => {
      const { getByTestId } = render(<MessageEmptyState />)
      const container = getByTestId('message-empty-state')

      expect(container.props.style).toEqual(
        expect.objectContaining({
          flex: 1,
        })
      )
    })
  })

  describe('Accessibility', () => {
    it('should have accessible message text', () => {
      const { getByTestId } = render(<MessageEmptyState />)
      const messageText = getByTestId('empty-state-message')
      expect(messageText).toBeTruthy()
    })
  })
})