import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { contractAdvancesPaidList } from 'src/__fixtures__/graphql/contract-advances';
import {
    AdvanceFormFieldsCreation,
    AdvanceFormFieldsCreationPropTypes,
} from 'src/components/advance-form/advance-form-fields-creation';
import { ADVANCES_CURRENCY_WARNING_ALERT } from 'src/constants';

describe('<ContractFormFields> layout', () => {
    const render = (props: AdvanceFormFieldsCreationPropTypes) =>
        renderInAppContext(<AdvanceFormFieldsCreation {...props} />);

    const props: AdvanceFormFieldsCreationPropTypes = {
        changeHandler: jest.fn(),
        formData: {
            ...contractAdvancesPaidList.abacusContractAdvancesPaid.items[0],
            approvalConfirmation: false,
            milestoneReached: 'yes',
            paymentConfirmation: false,
            referencePaymentType: {
                notes: 'Notes',
                referencePaymentTypeId: '1234',
            },
        },
        errors: {
            advanceDescription: '',
            amount: '',
            currencyCode: '',
            milestone: '',
            milestoneDescription: '',
        },
        showCurrencyWarning: false,
    };

    it('renders', () => {
        const { container } = render(props);
        expect(container).toBeDefined();
        expect(screen.getByText('Advance Creation Fields')).toBeDefined();
        expect(
            screen.getByText(
                'The below fields are required for advance to be created successfully'
            )
        ).toBeDefined();
        expect(screen.getByText('Payment Description')).toBeDefined();
        expect(screen.getByText('Pre Tax Amount')).toBeDefined();
        expect(screen.getByTestId('AmountTooltip')).toBeDefined();
        expect(screen.getByTestId('amountTestId')).toBeDefined();
        expect(screen.getByText('Currency')).toBeDefined();
        expect(screen.getByTestId('currencySelect')).toBeDefined();
        expect(
            screen.getByText('Milestone to Qualify for Payment')
        ).toBeDefined();
        expect(screen.getByText('Recoupment')).toBeDefined();
        expect(screen.getByText('Milestone Description')).toBeDefined();
        expect(screen.getByText('Test Milestone Description')).toBeDefined();
    });

    it('render errors', () => {
        const { container } = render({
            ...props,
            errors: {
                advanceDescription: 'Advance description error',
                amount: 'Amount error',
                currencyCode: 'Currency code error',
                milestone: 'Milestone error',
                milestoneDescription: 'Milestone description error',
            },
        });

        expect(container).toBeDefined();
        expect(screen.getByText('Advance description error')).toBeDefined();
        expect(screen.getByText('Amount error')).toBeDefined();
        expect(screen.getByText('Currency code error')).toBeDefined();
        expect(screen.getByText('Milestone error')).toBeDefined();
        expect(screen.getByText('Milestone description error')).toBeDefined();
    });

    it('render currency warning', () => {
        const { container } = render({
            ...props,
            showCurrencyWarning: true,
        });

        expect(container).toBeDefined();
        expect(
            screen.getByText(ADVANCES_CURRENCY_WARNING_ALERT.text)
        ).toBeDefined();
    });
});