import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { createIdentity, renderInAppContext } from '@theorchard/suite-testing';
import {
    ContractSummaryNotes,
    ContractSummaryNotesPropsTypes,
} from 'src/components/contract-detail/contract-summary-notes';
import { ABACUS_PROFILE } from 'src/constants';

describe('<ContractSummaryNotes />', () => {
    const render = (props: ContractSummaryNotesPropsTypes) =>
        renderInAppContext(<ContractSummaryNotes {...props} />, {
            identity: createIdentity({
                profileType: ABACUS_PROFILE,
            }),
        });

    const props: ContractSummaryNotesPropsTypes = {
        contractName: 'Test Contract',
        summaryNote: null,
    };

    const summaryNote =
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';

    it('renders contract summary section', () => {
        render(props);
        expect(screen.getByText('Contract Summary')).toBeDefined();
    });

    it('renders "Add Notes" link and hides the "Notes" section if no notes have been added to the contract', () => {
        render(props);
        expect(screen.getByText('Add Notes')).toBeDefined();
        expect(screen.queryByTestId('SummaryNotes')).toBeNull();
    });

    it('opens summary notes sidecar on click of "Add Notes" link', () => {
        render(props);
        const addNotesLink = screen.getByText('Add Notes');
        fireEvent.click(addNotesLink);

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

    it('renders "Notes" section if contract has a summary note', () => {
        render({ ...props, summaryNote });

        expect(screen.getByTestId('FlagGlyphIcon')).toBeDefined();
        expect(screen.getByText('Notes')).toBeDefined();
        expect(screen.getByTestId('SummaryNotesText')).toHaveTextContent(
            summaryNote
        );
    });

    it('renders edit/delete buttons and hide "Add Notes" link if contract has a summary note', () => {
        render({ ...props, summaryNote });

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

    it('opens summary notes sidecar on click of edit icon', () => {
        render({ ...props, summaryNote });

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

        expect(screen.getByTestId('ContractSummaryNotesSidecar')).toBeDefined();
        const contractSummaryNotesInput = screen.getByTestId(
            'contractSummaryNotesInput'
        );
        expect(contractSummaryNotesInput).toHaveTextContent(summaryNote);
    });

    it('opens delete summary notes modal on click of delete icon', () => {
        render({ ...props, summaryNote });

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

        expect(screen.getByTestId('DeleteContractSummaryNotes')).toBeDefined();
        expect(
            screen.getByText('Delete Contract Summary Notes?')
        ).toBeDefined();
    });
});