import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { Text } from 'react-native';
import { InlineWidget } from '../components/InlineWidget';

describe('InlineWidget rendering', () => {
    it('should render children when visible is true', () => {
        const { getByText } = render(
            <InlineWidget visible={true} height={300}>
                <Text>Inline Survey</Text>
            </InlineWidget>
        );

        expect(getByText('Inline Survey')).toBeTruthy();
    });

    it('should render close button when visible is true', () => {
        const { getByText } = render(
            <InlineWidget visible={true} height={300}>
                <Text>Content</Text>
            </InlineWidget>
        );

        expect(getByText('✕')).toBeTruthy();
    });

    it('should call onClose when close button is pressed', () => {
        const mockOnClose = jest.fn();
        const { getByText } = render(
            <InlineWidget visible={true} height={300} onClose={mockOnClose}>
                <Text>Content</Text>
            </InlineWidget>
        );

        fireEvent.press(getByText('✕'));

        expect(mockOnClose).toHaveBeenCalledTimes(1);
    });

    it('should still render content when visible is false', () => {
        const { getByText } = render(
            <InlineWidget visible={false} height={300}>
                <Text>Hidden Content</Text>
            </InlineWidget>
        );

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

    it('should hide close button when visible is false', () => {
        const { queryByText } = render(
            <InlineWidget visible={false} height={300}>
                <Text>Content</Text>
            </InlineWidget>
        );

        expect(queryByText('✕')).toBeNull();
    });

    it('should not throw when onClose is not provided and close is pressed', () => {
        const { getByText } = render(
            <InlineWidget visible={true} height={300}>
                <Text>Content</Text>
            </InlineWidget>
        );

        expect(() => fireEvent.press(getByText('✕'))).not.toThrow();
    });

    it('should render multiple children', () => {
        const { getByText } = render(
            <InlineWidget visible={true} height={300}>
                <Text>Child A</Text>
                <Text>Child B</Text>
            </InlineWidget>
        );

        expect(getByText('Child A')).toBeTruthy();
        expect(getByText('Child B')).toBeTruthy();
    });
});