import React from 'react';
import { render, waitFor, act } from '@testing-library/react';
import { FullscreenModal } from '../fullscreenModal';

describe('FullscreenModal', () => {
    const text = 'modal content';

    test('renders child content', () => {
        const { getByText } = render(<FullscreenModal>{text}</FullscreenModal>);
        expect(getByText(text)).toBeVisible();
        expect(getByText(text)).toHaveClass('FullscreenModal');
    });

    describe('layout', () => {
        test('is not fluid by default', () => {
            const { getByText, queryByTestId } = render(<FullscreenModal>{text}</FullscreenModal>);
            expect(getByText(text)).toBeVisible();
            expect(queryByTestId('FullscreenModal-fluid')).toBeNull();
        });

        test('is fluid when prop is set', () => {
            const { getByText, getByTestId } = render(
                <FullscreenModal layout="fluid">{text}</FullscreenModal>
            );
            const fluid = getByTestId('FullscreenModal-fluid');
            expect(fluid).toBeVisible();
            expect(fluid).toContain(getByText(text));
            expect(fluid.parentNode).toHaveClass('FullscreenModal');
        });
    });

    describe('isOpen', () => {
        test('is open by default', () => {
            const { getByText } = render(<FullscreenModal>{text}</FullscreenModal>);

            expect(getByText(text)).toBeVisible();
        });

        test('is closed when prop is set', () => {
            const { queryByText } = render(
                <FullscreenModal isOpen={false}>{text}</FullscreenModal>
            );

            expect(queryByText(text)).toBeNull();
        });
    });

    describe('body margin-top inheritance', () => {
        beforeEach(() => {
            document.body.style.marginTop = '';
        });

        afterEach(() => {
            document.body.style.marginTop = '';
        });

        const getModalOverlay = () => {
            return document.querySelector('.ReactModal__Overlay');
        };

        test('inherits margin-top from body on initial render', () => {
            document.body.style.marginTop = '50px';

            render(<FullscreenModal>{text}</FullscreenModal>);

            // Find the modal overlay element
            const overlay = getModalOverlay();
            expect(overlay).toHaveStyle({ marginTop: '50px' });
        });

        test('has no margin-top when body has no margin-top', () => {
            document.body.style.marginTop = '';

            render(<FullscreenModal>{text}</FullscreenModal>);

            // Find the modal overlay element
            const overlay = getModalOverlay();
            expect(overlay).not.toHaveStyle({ marginTop: '50px' });
        });

        test('updates margin-top when body margin-top is added', async () => {
            document.body.style.marginTop = '';

            render(<FullscreenModal>{text}</FullscreenModal>);

            const overlay = getModalOverlay();
            expect(overlay).not.toHaveStyle({ marginTop: '100px' });

            act(() => {
                document.body.style.marginTop = '100px';
            });

            await waitFor(() => {
                expect(overlay).toHaveStyle({ marginTop: '100px' });
            });
        });

        test('updates when body margin-top is removed', async () => {
            document.body.style.marginTop = '75px';

            render(<FullscreenModal>{text}</FullscreenModal>);

            const overlay = getModalOverlay();

            expect(overlay).toHaveStyle({ marginTop: '75px' });

            act(() => {
                document.body.style.marginTop = '';
            });

            await waitFor(() => {
                expect(overlay).not.toHaveStyle({ marginTop: '75px' });
            });
        });
    });
});