import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import widgetFields from '@/constants/cms-widget-fields.js';
import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
import baseMixin from '@/mixins/base-mixin';

let cmsContent;

const mockCmsContent = {
    [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose a payment option',
    [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [
        {
            Name: 'NameA',
            Text: 'TextA',
            SubText: 'SubTextA',
            ImageId: 'idA',
            AnswerImageUrl: 'imageA',
            SubWidgetName: 'subWidgetA'
        },
        {
            Name: 'NameB',
            Text: 'TextB',
            SubText: 'SubTextB',
            ImageId: 'idB',
            AnswerImageUrl: 'imageB',
            SubWidgetName: 'subWidgetB'
        }
    ]
};

function generateDefaultProps() {
    return {
        modelValue: 'modelValue',
        cmsWidgetName: 'PaymentMethodWidget'
    };
}

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

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

    mountOptions.global.mixins = [mockMixin];

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

describe('Payment Method Question', () => {
    beforeEach(() => {
        cmsContent = mockCmsContent;
    });
    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: cmsContent.Answers[0].Text,
                altText: cmsContent.Answers[0].Text,
                groupName: 'payment-method',
                value: cmsContent.Answers[0].Name,
                buttonImage: cmsContent.Answers[0].AnswerImageUrl
            },
            {
                buttonLabel: cmsContent.Answers[1].Text,
                altText: cmsContent.Answers[1].Text,
                groupName: 'payment-method',
                value: cmsContent.Answers[1].Name,
                buttonImage: cmsContent.Answers[1].AnswerImageUrl
            }
        ]);
    });

    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([]);
    });
});
