import React from 'react';
import { render, screen } from '@testing-library/react';
import { ModalContent } from '../modalContent';
import { ModalHeader } from '../../modalHeader';
import { ModalFooter } from '../../modalFooter';
import { useScrolled } from '@theorchard/suite-utils';

vi.mock('@theorchard/suite-utils', () => ({
    useScrolled: vi.fn().mockReturnValue({
        scroll: { top: false, bottom: false, left: false, right: false },
        scrollRef: vi.fn(),
    }),
}));

vi.mock('../../modalHeader', () => ({
    ModalHeader: vi.fn(() => <div data-testid="ModalHeader"></div>),
}));

vi.mock('../../modalFooter', () => ({
    ModalFooter: vi.fn(() => <div data-testid="ModalFooter"></div>),
}));

describe('<ModalContent>', () => {
    const onRequestClose = vi.fn();

    afterEach(() => {
        vi.clearAllMocks();
    });

    test('applies style', () => {
        render(
            <ModalContent
                testId="style-test"
                style={{ marginTop: 10 }}
                onRequestClose={onRequestClose}
            >
                Content
            </ModalContent>
        );

        expect(screen.getByTestId('style-test')).toHaveStyle({ marginTop: '10px' });
    });

    test('sets correct className and data-testid', () => {
        vi.mocked(useScrolled).mockReturnValue({
            scroll: { top: true, bottom: true, left: false, right: false },
            scrollRef: vi.fn(),
        });

        render(
            <ModalContent
                className="custom-class"
                testId="custom-test-id"
                onRequestClose={onRequestClose}
            >
                Content
            </ModalContent>
        );

        const container = screen.getByTestId('custom-test-id');
        expect(container).toBeInTheDocument();
        expect(container).toHaveClass('custom-class');
        expect(container).toHaveClass('ReactModal-scrollTop');
        expect(container).toHaveClass('ReactModal-scrollBottom');
    });

    test('renders <ModalHeader> with correct props', () => {
        render(
            <ModalContent
                title="Test Title"
                subtitle="Test Subtitle"
                onRequestClose={onRequestClose}
            >
                Content
            </ModalContent>
        );

        expect(ModalHeader).toHaveBeenCalledTimes(1);
        expect(screen.getByTestId('ModalHeader')).toBeInTheDocument();
        expect(ModalHeader).toHaveBeenCalledWith(
            {
                header: 'Test Title',
                subtitle: 'Test Subtitle',
                onButtonClick: onRequestClose,
            },
            expect.any(Object)
        );
    });

    test('uses header prop when title is not provided', () => {
        render(
            <ModalContent header="Header Only" onRequestClose={onRequestClose}>
                Content
            </ModalContent>
        );

        expect(ModalHeader).toHaveBeenCalledWith(
            {
                header: 'Header Only',
                onButtonClick: onRequestClose,
            },
            expect.any(Object)
        );
    });

    test('renders <ModalFooter> with correct props when onConfirm is provided', () => {
        const onConfirm = vi.fn();

        render(
            <ModalContent
                onRequestClose={onRequestClose}
                onConfirm={onConfirm}
                confirmTitle="Confirm"
                cancelTitle="Cancel"
                confirmDisabled
                confirmVariant="primary"
                hideCancelButton
                confirmButtonProps={{ testId: 'confirm-btn' }}
                cancelButtonProps={{ testId: 'cancel-btn' }}
            >
                Content
            </ModalContent>
        );

        expect(ModalFooter).toHaveBeenCalledTimes(1);
        expect(screen.getByTestId('ModalFooter')).toBeInTheDocument();
        expect(ModalFooter).toHaveBeenCalledWith(
            {
                onCancel: onRequestClose,
                onConfirm,
                confirmTitle: 'Confirm',
                confirmDisabled: true,
                confirmVariant: 'primary',
                cancelTitle: 'Cancel',
                hideCancelButton: true,
                confirmButtonProps: { testId: 'confirm-btn' },
                cancelButtonProps: { testId: 'cancel-btn' },
            },
            expect.any(Object)
        );
    });

    test('does not render <ModalFooter> when neither onConfirm nor confirmButtonProps are provided', () => {
        render(<ModalContent onRequestClose={onRequestClose}>Content</ModalContent>);

        expect(ModalFooter).not.toHaveBeenCalled();
    });

    test('does not render <ModalHeader> when customHeader is provided', () => {
        render(
            <ModalContent customHeader={<div>Custom Header</div>} onRequestClose={onRequestClose}>
                Content
            </ModalContent>
        );

        expect(ModalHeader).not.toHaveBeenCalled();
    });

    test('renders customFooter instead of <ModalFooter> when no confirm logic is provided', () => {
        render(
            <ModalContent customFooter={<div>Custom Footer</div>} onRequestClose={onRequestClose}>
                Content
            </ModalContent>
        );

        expect(ModalFooter).not.toHaveBeenCalled();
    });
});