import React from 'react';

import { fireEvent } from '@testing-library/react-native';

import { render } from '@/components/testUtils';
import Card from '@/components/shared/Card';
import { Text } from 'react-native';
import { theme } from '@/app/shared/theme';

const renderComponent = ({ backgroundColor, onPress = undefined, content = 'content'} = {}) => {
  const base = render(
    <Card backgroundColor={backgroundColor} onPress={onPress} testID='card'>
      <Text>{content}</Text>
    </Card>
  );

  return base;
};

describe('[Component] Card', () => {
  test('renders correctly', () => {
    const card = renderComponent({ backgroundColor: 'red' });

    expect(card).toMatchSnapshot();
  });

  test('renders children correctly', () => {
    const { getByText } = renderComponent({ backgroundColor: 'red', content: 'Test Content'});

    expect(getByText('Test Content')).toBeTruthy();
  });

  test('applies the correct background color', () => {
    const { getByTestId } = renderComponent({ backgroundColor: 'green'});

    const card = getByTestId('card');
    expect(card?.props.style[0].backgroundColor).toEqual(theme.colors.green);
  });

  test('does not render as TouchableOpacity when onPress is not provided', () => {
    const { queryByTestId } = renderComponent({ backgroundColor: 'red' });

    // TouchableOpacity ne doit pas exister
    expect(queryByTestId('card').props.onPress).toBeUndefined();
  });

  test('calls onPress when pressed', () => {
    const onPressMock = jest.fn();
    const { getByTestId } = renderComponent({
      backgroundColor: 'green',
      onPress: onPressMock,
      content: 'Press me'
    });

    fireEvent.press(getByTestId('card'));
    expect(onPressMock).toHaveBeenCalled();
  });
});