import React from 'react';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderInAppContext } from '@theorchard/suite-testing';
import { contractDetails as contract } from 'src/__fixtures__/graphql/contract-details';
import * as contractMutations from 'src/apollo/mutations/contract';
import { deleteContractSummaryNotesMessage } from 'src/apollo/type-constants/contract';
import {
    DeleteContractSummaryNotesModal,
    DeleteContractSummaryNotesModalPropsTypes,
} from 'src/components/contract-detail/delete-contract-summary-notes-modal';

describe('<DeleteContractSummaryNotesModal />', () => {
    const render = (props: DeleteContractSummaryNotesModalPropsTypes) =>
        renderInAppContext(<DeleteContractSummaryNotesModal {...props} />);

    const updateContract = jest.fn().mockResolvedValue({
        data: { abacusUpdateContract: contract.abacusContract },
        loading: false,
    });
    beforeEach(() =>
        jest
            .spyOn(contractMutations, 'useUpdateContract')
            .mockReturnValue(updateContract)
    );
    afterEach(jest.restoreAllMocks);

    const props: DeleteContractSummaryNotesModalPropsTypes = {
        contractName: 'Test contract',
        isDeleteSummaryNotesModalOpen: true,
        onRequestCloseDeleteModal: jest.fn(),
    };

    it('renders delete contract summary notes modal', () => {
        render(props);

        expect(screen.getByTestId('DeleteContractSummaryNotes')).toBeDefined();
    });

    it('renders modal content', () => {
        render(props);

        expect(
            screen.getByText('Delete Contract Summary Notes?')
        ).toBeDefined();
        expect(
            screen.getByText(
                'You are about to delete this contract summary notes.'
            )
        ).toBeDefined();
        expect(screen.getByTestId('WarningGlyphIcon')).toBeDefined();
    });

    it('renders a success toast popup on deleting summary notes successfully', async () => {
        render(props);

        const deleteButton = screen.getByRole('button', { name: 'Delete' });
        await userEvent.setup().click(deleteButton);

        const toast = await screen.findByTestId('Toast-0');
        expect(toast).toBeDefined();
        expect(toast).toHaveTextContent(
            deleteContractSummaryNotesMessage('Test contract')
        );
    });

    it('closes modal when isDeleteSummaryNotesModalOpen is false', () => {
        render({ ...props, isDeleteSummaryNotesModalOpen: false });
        expect(screen.queryByTestId('DeleteContractSummaryNotes')).toBeNull();
    });
});