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

import paymentMethodListButton from "@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button";

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;

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
            let 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
            let 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);
        });
    });
});

function generateDefaultProps() {
    return {
        buttonLabel: testConstants.noInline,
        altText: testConstants.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) => {
                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
            }),
        },
    };

    mountOptions.global.mixins = [mockMixin];

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