import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
import { contractFlowthroughDetail } from 'src/__fixtures__/graphql/contract-flowthrough';
import {
    ContractFlowthroughButtons,
    ContractFlowthroughButtonsProps,
} from 'src/components/contract-detail/contract-flowthrough-buttons';

describe('<ContractFlowthroughButtons />', () => {
    const contractId = '123';
    const history = createMemoryHistory();
    jest.spyOn(history, 'push');
    const render = (props: ContractFlowthroughButtonsProps) => {
        renderInAppContext(
            <Router history={history}>
                <ContractFlowthroughButtons {...props} />
            </Router>
        );
        return history;
    };
    const abacusContractFlowthrough =
        contractFlowthroughDetail.abacusContractFlowthrough;

    it('renders Add button if flowthrough is not added to the contract', () => {
        render({ contractFlowthrough: null, contractId });

        expect(screen.getByText('Add')).toBeDefined();
        expect(screen.queryByTestId('EditGlyphIcon')).toBeNull();
        expect(screen.queryByTestId('TrashGlyphIcon')).toBeNull();
    });

    it('opens fullscreen modal on click of Add button', async () => {
        const history = render({ contractFlowthrough: null, contractId });
        screen.getByText('Add').click();
        await waitFor(() => {
            expect(history.push).toHaveBeenCalledWith(
                '/contract/123/flowthrough/new'
            );
        });
    });

    it('renders Edit and Delete icons if flowthrough is added to the contract', () => {
        render({
            contractFlowthrough: abacusContractFlowthrough,
            contractId,
        });

        expect(screen.queryByText('Add')).toBeNull();
        expect(screen.getByTestId('EditGlyphIcon')).toBeDefined();
        expect(screen.getByTestId('TrashGlyphIcon')).toBeDefined();
    });

    it('opens sidecar on click of Edit icon', () => {
        render({
            contractFlowthrough: abacusContractFlowthrough,
            contractId,
        });

        expect(screen.queryByTestId('contractFlowthroughSidecar')).toBeNull();

        const editIcon = screen.getByTestId('EditGlyphIcon');
        fireEvent.click(editIcon);

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

    it('opens modal popup on click of delete icon', () => {
        render({
            contractFlowthrough: abacusContractFlowthrough,
            contractId,
        });

        expect(screen.queryByTestId('deleteContractFlowthrough')).toBeNull();
        expect(
            screen.queryByText('Delete flowthrough for this contract?')
        ).toBeNull();

        const deleteIcon = screen.getByTestId('TrashGlyphIcon');
        fireEvent.click(deleteIcon);

        expect(screen.getByTestId('deleteContractFlowthrough')).toBeDefined();
        expect(
            screen.getByText('Delete flowthrough for this contract?')
        ).toBeDefined();
    });
});