import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { contractDetails } from 'src/__fixtures__/graphql/contract-details';
import { TOOLTIP_CLIENT_NOTICE_DATE } from 'src/apollo/type-constants/contract';
import {
    TerminationFormFields,
    TerminationFormFieldsPropTypes,
} from 'src/components/contract-lifecycle-shared/termination-form-fields';

describe('<TerminationFormFields />', () => {
    const defaultProps: TerminationFormFieldsPropTypes = {
        contractInitialStartDate:
            contractDetails.abacusContract.initialStartDate!,
        contractLifecycle: contractDetails.abacusContract.lifecycle,
        errors: {},
        handleFormChange: jest.fn(),
    };

    const render = (props: TerminationFormFieldsPropTypes = defaultProps) =>
        renderInAppContext(<TerminationFormFields {...props} />);

    it('renders client notice date field', () => {
        render();

        const clientNoticeDate = screen.getByTestId('clientNoticeDate');
        expect(screen.getByText('Client Notice Date')).toBeInTheDocument();
        expect(clientNoticeDate).toBeInTheDocument();
        expect(clientNoticeDate.textContent).toEqual('YYYY-MM-DD');
    });

    it('displays a tooltip message on hover', async () => {
        render();
        const toolTip = screen.getByTestId('clientNoticeDateTooltip');
        expect(toolTip).toBeDefined();

        fireEvent.mouseOver(toolTip);
        const tooltipText = await screen.findByText(TOOLTIP_CLIENT_NOTICE_DATE);
        expect(tooltipText).toBeDefined();
    });

    it('renders termination date field', () => {
        render();

        const terminationDate = screen.getByTestId('terminationDate');
        expect(screen.getByText('Termination Date')).toBeInTheDocument();
        expect(terminationDate).toBeInTheDocument();
        expect(terminationDate.textContent).toEqual('YYYY-MM-DD');
    });

    it('displays client notice date if selected', () => {
        render({
            ...defaultProps,
            contractLifecycle: {
                ...defaultProps.contractLifecycle,
                terminationNoticeReceived: '2030-09-01',
            },
        });

        const clientNoticeDate = screen.getByTestId('clientNoticeDate');
        expect(screen.getByText('Client Notice Date')).toBeInTheDocument();
        expect(clientNoticeDate).toBeInTheDocument();
        expect(clientNoticeDate.textContent).toEqual('Sep 1, 2030');
    });

    it('displays termination date if selected', () => {
        render({
            ...defaultProps,
            contractLifecycle: {
                ...defaultProps.contractLifecycle,
                terminationEffective: '2030-10-01',
            },
        });

        const terminationDate = screen.getByTestId('terminationDate');
        expect(screen.getByText('Termination Date')).toBeInTheDocument();
        expect(terminationDate).toBeInTheDocument();
        expect(terminationDate.textContent).toEqual('Oct 1, 2030');
    });

    it('renders error message if present', () => {
        render({
            ...defaultProps,
            contractLifecycle: {
                ...defaultProps.contractLifecycle,
                terminationEffective: '2030-10-01',
            },
            errors: {
                terminationEffective:
                    'Termination Date should be today or in the future.',
            },
        });
        const errorMsg = screen.getByTestId(
            'ContractLifecycleTerminationError'
        );
        expect(errorMsg.textContent).toEqual(
            'Termination Date should be today or in the future.'
        );
    });
});