// component
import paymentSwitch from "@/layouts/payment/payment-switch/payment-switch";

// supporting files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper";
import paymentSwitchButton from "@/layouts/payment/payment-switch/payment-switch-button/payment-switch-button";
import store from "@/store";

let mockCmsContent = {};

describe("payment-switch", () => {
    beforeEach(() => {
        store.getters = {};
        mockCmsContent = {
            PaymentSwitchWidget: {
                Answers: [
                    {
                        Name: "ap",
                        Text: "Afterpay Text",
                        SubText: "Afterpay SubText",
                        ImageId: "Afterpay Id",
                        AnswerImageUrl: "Afterpay Image",
                        SubWidgetName: "Afterpay SubWidget",
                    },
                    {
                        Name: "pp",
                        Text: "Paypal Text",
                        SubText: "Paypal SubText",
                        ImageId: "Paypal Id",
                        AnswerImageUrl: "Paypal Image",
                        SubWidgetName: "Paypal SubWidget",
                    },
                    {
                        Name: "cc",
                        Text: "Credit Card Text",
                        SubText: "Credit Card SubText",
                        ImageId: "Credit Card Id",
                        AnswerImageUrl: "Credit Card Image",
                        SubWidgetName: "Credit Card SubWidget",
                    },
                ],
            },
        };
    });

    describe("Always renders two components", () => {
        const paymentTypes = ["ap", "cc", "pp"];

        paymentTypes.forEach((type) => {
            test(`Type Chosen: ${type}`, () => {
                // Arrange
                const wrapper = setupMocks({
                    propsData: {
                        cmsWidgetName: "PaymentSwitchWidget",
                        paymentType: type,
                    },
                });

                // Act

                const buttons = wrapper.findAllComponents(paymentSwitchButton);
                const separators = wrapper.findAll(".switch-button-separator");

                // Assert
                expect(buttons.length).toBe(2);
                expect(separators.length).toBe(1);
            });
        });
    });

    describe("Correctly maps cms content to dictionary", () => {
        test("Maps array to dict", () => {
            // Arrange
            const wrapper = setupMocks({
                propsData: {
                    cmsWidgetName: "PaymentSwitchWidget",
                    paymentType: "ap",
                },
            });

            // Act
            const mappedVals = wrapper.vm.paymentMethodsInfo;

            // Assert
            expect(mappedVals.ap).toBeDefined();
            expect(mappedVals.ap.buttonText).toContain("Afterpay");
            expect(mappedVals.ap.imageId).toContain("Afterpay");
            expect(mappedVals.ap.answerImageUrl).toContain("Afterpay");

            expect(mappedVals.pp).toBeDefined();
            expect(mappedVals.pp.buttonText).toContain("Paypal");
            expect(mappedVals.pp.imageId).toContain("Paypal");
            expect(mappedVals.pp.answerImageUrl).toContain("Paypal");

            expect(mappedVals.cc).toBeDefined();
            expect(mappedVals.cc.buttonText).toContain("Credit Card");
            expect(mappedVals.cc.imageId).toContain("Credit Card");
            expect(mappedVals.cc.answerImageUrl).toContain("Credit Card");
        });
    });
});

function setupMocks(customMountOptions) {
    const mountOptions = getMountOptions({
        ...customMountOptions,
    });

    // set all mock stuff
    mountOptions.global.mocks["$store"] = store;
    mountOptions.mixins = [
        {
            methods: {
                getCmsContent: jest.fn().mockImplementation((widgetName, fieldName) => {
                    if (mockCmsContent[widgetName] && mockCmsContent[widgetName][fieldName])
                        return mockCmsContent[widgetName][fieldName];
                }),
                setCmsContent: jest.fn(),
            },
        },
    ];

    const wrapper = shallowMount(paymentSwitch, mountOptions);

    // act on vm

    return wrapper;
}
