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

describe('ModalWidget rendering', () => {
    it('should render Modal component when visible is true', () => {
        const { getByTestId, UNSAFE_getByType } = render(
            <ModalWidget visible={true} height={400}>
                <Text>Survey Content</Text>
            </ModalWidget>
        );

        const modal = UNSAFE_getByType(require('react-native').Modal);
        expect(modal).toBeTruthy();
    });

    it('should render children inside the modal', () => {
        const { getByText } = render(
            <ModalWidget visible={true} height={400}>
                <Text>Survey Content</Text>
            </ModalWidget>
        );

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

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

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

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

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

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

    it('should set Modal visible to true via internal state on initial render', () => {
        const { UNSAFE_getByType } = render(
            <ModalWidget visible={true} height={400}>
                <Text>Content</Text>
            </ModalWidget>
        );

        const modal = UNSAFE_getByType(require('react-native').Modal);
        expect(modal.props.visible).toBe(true);
    });

    it('should use slide animation type', () => {
        const { UNSAFE_getByType } = render(
            <ModalWidget visible={true} height={400}>
                <Text>Content</Text>
            </ModalWidget>
        );

        const modal = UNSAFE_getByType(require('react-native').Modal);
        expect(modal.props.animationType).toBe('slide');
    });

    it('should set Modal transparent prop to true', () => {
        const { UNSAFE_getByType } = render(
            <ModalWidget visible={true} height={400}>
                <Text>Content</Text>
            </ModalWidget>
        );

        const modal = UNSAFE_getByType(require('react-native').Modal);
        expect(modal.props.transparent).toBe(true);
    });

    it('should set hardwareAccelerated prop to true', () => {
        const { UNSAFE_getByType } = render(
            <ModalWidget visible={true} height={400}>
                <Text>Content</Text>
            </ModalWidget>
        );

        const modal = UNSAFE_getByType(require('react-native').Modal);
        expect(modal.props.hardwareAccelerated).toBe(true);
    });

    it('should pass visible=false to Modal when visible prop is false', () => {
        const { UNSAFE_getByType } = render(
            <ModalWidget visible={false} height={400}>
                <Text>Content</Text>
            </ModalWidget>
        );

        const modal = UNSAFE_getByType(require('react-native').Modal);
        expect(modal.props.visible).toBe(false);
    });

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

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

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

    it('should reflect updated visible prop after rerender', () => {
        const { UNSAFE_getByType, rerender } = render(
            <ModalWidget visible={true} height={400} onClose={jest.fn()}>
                <Text>Content</Text>
            </ModalWidget>
        );

        rerender(
            <ModalWidget visible={false} height={400} onClose={jest.fn()}>
                <Text>Content</Text>
            </ModalWidget>
        );

        const modal = UNSAFE_getByType(require('react-native').Modal);
        expect(modal.props.visible).toBe(false);
    });

    it('should not call onClose if onClose prop is not provided', () => {
        const { getByText } = render(
            <ModalWidget visible={true} height={400}>
                <Text>Content</Text>
            </ModalWidget>
        );

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

    it('should render multiple children', () => {
        const { getByText } = render(
            <ModalWidget visible={true} height={400}>
                <Text>First Child</Text>
                <Text>Second Child</Text>
            </ModalWidget>
        );

        expect(getByText('First Child')).toBeTruthy();
        expect(getByText('Second Child')).toBeTruthy();
    });
});