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

import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";

const testConstants = {
    cms: {
        question: {
            text: "Choose a payment option",
        },
        answers: {
            optionA: {
                name: "NameA",
                text: "TextA",
                subText: "SubTextA",
                imageId: "idA",
                image: "imageA",
                subWidget: "subWidgetA",
            },
            optionB: {
                name: "NameB",
                text: "TextB",
                subText: "SubTextB",
                imageId: "idB",
                image: "imageB",
                subWidget: "subWidgetB",
            },
        },
    },
};

let cmsContent;

describe("Payment Method Question", () => {
    beforeEach(() => {
        cmsContent = {
            PaymentMethodWidget: {
                QuestionText: testConstants.cms.question,
                Answers: [
                    {
                        Name: testConstants.cms.answers.optionA.name,
                        Text: testConstants.cms.answers.optionA.text,
                        SubText: testConstants.cms.answers.optionA.subText,
                        ImageId: testConstants.cms.answers.optionA.imageId,
                        AnswerImageUrl: testConstants.cms.answers.optionA.image,
                        SubWidgetName: testConstants.cms.answers.optionA.subWidget,
                    },
                    {
                        Name: testConstants.cms.answers.optionB.name,
                        Text: testConstants.cms.answers.optionB.text,
                        SubText: testConstants.cms.answers.optionB.subText,
                        ImageId: testConstants.cms.answers.optionB.imageId,
                        AnswerImageUrl: testConstants.cms.answers.optionB.image,
                        SubWidgetName: testConstants.cms.answers.optionB.subWidget,
                    },
                ],
            },
        };
    });

    it("Should map cms content correctly", () => {
        // Arrange
        const props = generateDefaultProps();

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

        // Act
        const mappedContent = wrapper.vm.paymentMethodAnswerData;

        // Assert
        expect(mappedContent).toEqual([
            {
                buttonLabel: testConstants.cms.answers.optionA.text,
                altText: testConstants.cms.answers.optionA.text,
                groupName: "payment-method",
                value: testConstants.cms.answers.optionA.name,
                buttonImage: testConstants.cms.answers.optionA.image,
            },
            {
                buttonLabel: testConstants.cms.answers.optionB.text,
                altText: testConstants.cms.answers.optionB.text,
                groupName: "payment-method",
                value: testConstants.cms.answers.optionB.name,
                buttonImage: testConstants.cms.answers.optionB.image,
            },
        ]);
    });

    it("Handles null cms content gracefully", () => {
        // Arrange
        cmsContent = {};
        const props = generateDefaultProps();

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

        // Act
        const mappedContent = wrapper.vm.paymentMethodAnswerData;

        // Assert
        expect(mappedContent).toEqual([]);
    });
});

function generateDefaultProps() {
    return {
        modelValue: "modelValue",
    };
}

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(paymentMethodQuestion, mountOptions);
    wrapper.vm.setCmsContent = jest.fn();
    return { wrapper };
}