import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { PopupModal, PopupModalPropType } from '../popup-modal';

describe('<PopupModal>', () => {
    const defaultProps: PopupModalPropType = {
        closeHandler: jest.fn(),
        headerLabel: 'HEADER',
        isOpen: true,
        modalContent: <div>Are you sure?</div>,
        saveHandler: jest.fn(),
    };

    const render = (props: PopupModalPropType) =>
        renderInAppContext(<PopupModal {...props} />);

    it('renders a Modal with default props', () => {
        render(defaultProps);
        const closeButton = screen.getByText('Cancel');
        const saveButton = screen.getByText('Save');

        expect(closeButton).toBeDefined();
        expect(saveButton).toBeDefined();
    });

    it('renders a Modal with specified close button and save button text', () => {
        const otherProps: PopupModalPropType = {
            ...defaultProps,
            closeButtonText: 'cerrar',
            saveButtonText: 'salvar',
        };
        render(otherProps);
        const closeButton = screen.getByText('cerrar');
        const saveButton = screen.getByText('salvar');

        expect(closeButton).toBeDefined();
        expect(saveButton).toBeDefined();
    });

    it('closes when the cancel button is clicked', async () => {
        const closeHandler = jest.fn();
        render({
            ...defaultProps,
            closeHandler,
        });
        const closeButton = screen.getByText('Cancel');
        fireEvent.click(closeButton);
        await waitFor(() => {
            expect(closeHandler).toHaveBeenCalled();
        });
    });

    it('executes the saveHandler when save button is clicked', async () => {
        const saveHandler = jest.fn();
        render({
            ...defaultProps,
            saveHandler,
        });
        const saveButton = screen.getByText('Save');
        fireEvent.click(saveButton);
        await waitFor(() => {
            expect(saveHandler).toHaveBeenCalled();
        });
    });

    it('avoids executing the saveHandler when disabled save button is clicked', async () => {
        const saveHandler = jest.fn();
        const otherProps: PopupModalPropType = {
            ...defaultProps,
            isSaveButtonDisabled: true,
            saveHandler,
        };
        render(otherProps);
        const saveButton = screen.getByText('Save');
        expect(saveButton.closest('button')).toHaveProperty('disabled', true);
        fireEvent.click(saveButton);
        await waitFor(() => {
            expect(saveHandler).not.toHaveBeenCalled();
        });
    });

    it('shows a loading indicator when isSaving is set', () => {
        const otherProps: PopupModalPropType = {
            ...defaultProps,
            isSaving: true,
        };
        render(otherProps);
        expect(screen.getByTestId('InProgressGlyphIcon')).toBeDefined();
    });
});