import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { PaymentEntityStatus } from 'src/types/payment-entity-status-indicator';
import PaymentEntityStatusIndicator, {
    PaymentEntityStatusIndicatorProps,
} from '../payment-entity-status-indicator';
describe('<Balance>', () => {
    const defaultProps = {
        closeBalanceStatus: PaymentEntityStatus.IN_PROGRESS,
        vatDocumentsStatus: PaymentEntityStatus.IN_PROGRESS,
        statementStatus: PaymentEntityStatus.IN_PROGRESS,
    };

    const render = (props: PaymentEntityStatusIndicatorProps) =>
        renderInAppContext(<PaymentEntityStatusIndicator {...props} />);

    it('renders "IN_PROGRESS" status', () => {
        const { container, getByText } = render(defaultProps);

        expect(getByText('In progress')).toBeDefined();
        expect(container.querySelector('.variant-warning')).toBeTruthy();
    });

    it('renders "COMPLETE" status', () => {
        const props = {
            closeBalanceStatus: PaymentEntityStatus.COMPLETE,
            vatDocumentsStatus: PaymentEntityStatus.COMPLETE,
            statementStatus: PaymentEntityStatus.COMPLETE,
        };

        const { container, getByText } = render(props);

        expect(getByText('Complete')).toBeDefined();
        expect(container.querySelector('.variant-success')).toBeTruthy();
    });

    const nonBlockedStatus: PaymentEntityStatus[] = [
        PaymentEntityStatus.IN_PROGRESS,
        PaymentEntityStatus.COMPLETE,
    ];
    describe.each(nonBlockedStatus)('renders IN_PROGRESS status', status => {
        it('renders IN_PROGRESS status when vatDocumentsStatus and statementStatus are set to "%s"', async () => {
            const props = {
                closeBalanceStatus: PaymentEntityStatus.IN_PROGRESS,
                vatDocumentsStatus: status,
                statementStatus: status,
            };
            const { container, getByText } = render(props);

            expect(getByText('In progress')).toBeDefined();
            expect(container.querySelector('.variant-warning')).toBeTruthy();
        });
    });

    const status: PaymentEntityStatus[] = [
        PaymentEntityStatus.BLOCKED,
        PaymentEntityStatus.IN_PROGRESS,
        PaymentEntityStatus.COMPLETE,
    ];
    describe.each(status)('renders BLOCKED status', status => {
        it('renders BLOCKED state when vatDocumentsStatus and statementStatus are set to "%s"', async () => {
            const props = {
                closeBalanceStatus: PaymentEntityStatus.BLOCKED,
                vatDocumentsStatus: status,
                statementStatus: status,
            };
            const { container, getByText } = render(props);

            expect(getByText('Blocked')).toBeDefined();
            expect(container.querySelector('.variant-error')).toBeTruthy();
        });
    });
});