import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';

// eslint-disable-next-line max-len
import paymentMethodListButton from '@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue';

const testConstants = {
    images: {
        A: 'imageA',
        B: 'imageB',
        NONE: null
    },
    names: {
        A: 'nameA',
        B: 'nameB'
    },
    content: {
        withInline: 'Button text with {custom:inlineImage} inline.',
        noInline: 'Button text with no inline'
    }
};

let cmsContent;

function generateDefaultProps() {
    return {
        buttonLabel: testConstants.content.noInline,
        altText: testConstants.content.noInline,
        groupName: 'payment-method',
        value: testConstants.names.A,
        buttonImage: testConstants.images.A
    };
}

function setupMocks(customMountOptions) {
    const mountOptions = getMountOptions(customMountOptions);

    const mockMixin = {
        methods: {
            getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
        }
    };

    mountOptions.global.mixins = [mockMixin];

    const wrapper = shallowMount(paymentMethodListButton, mountOptions);
    wrapper.vm.setCmsContent = jest.fn();
    return { wrapper };
}

describe('Payment Method Question', () => {
    beforeEach(() => {
        cmsContent = {};
    });

    describe('Side image', () => {
        it('Renders side image if image is present and not inline', () => {
            // Arrange
            const props = generateDefaultProps();
            const { wrapper } = setupMocks({
                propsData: props
            });

            // Act
            const showSideImage = wrapper.vm.shouldDisplaySideImage;

            expect(showSideImage).toBe(true);
        });

        it('Does not render side image if no image is present', () => {
            // Arrange
            const props = generateDefaultProps();

            props.buttonImage = testConstants.images.NONE;

            const { wrapper } = setupMocks({
                propsData: props
            });

            // Act
            const showSideImage = wrapper.vm.shouldDisplaySideImage;

            expect(showSideImage).toBe(false);
        });

        it('Does not render side image if inline', () => {
            // Arrange
            const props = generateDefaultProps();

            props.buttonLabel = testConstants.content.withInline;
            props.altText = testConstants.content.withInline;

            const { wrapper } = setupMocks({
                propsData: props
            });

            // Act
            const showSideImage = wrapper.vm.shouldDisplaySideImage;

            expect(showSideImage).toBe(false);
        });
    });
});