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

import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";

const testConstants = {
    cms: {
        header: {
            text: "Header",
        },
        sms: {
            text: "Sms",
        },
    },
    customer: {
        firstName: "First",
        lastName: "Last",
        phoneNumber: "111-111-1111",
        emailAddress: "builddigitaltest@safelite.com",
        isSmsOptIn: false,
    },
    displayContent: {
        fullName: "First Last",
        phoneNumber: "111-111-1111",
        emailAddress: "builddigitaltest@safelite.com",
        smsOptIn: "Sms",
    },
};

let cmsContent;

describe("Customer Review Block", () => {
    beforeEach(() => {
        cmsContent = {
            CustomerWidget: {
                HeaderText: testConstants.cms.header.text,
                SubheaderText: testConstants.cms.sms.text,
            },
        };
    });

    test("Should display header text from cms", async () => {
        // Arrange
        let props = generateDefaultProps();

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

        // Act
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.header).toEqual(testConstants.cms.header.text);
    });

    test("Should display sms text from cms", async () => {
        // Arrange
        let props = generateDefaultProps();

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

        // Act
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.text);
    });

    test("Should render correct display content", async () => {
        // Arrange
        let props = generateDefaultProps();

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

        // Act
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.displayContent).toEqual([
            testConstants.displayContent.fullName,
            testConstants.displayContent.emailAddress,
            testConstants.displayContent.phoneNumber,
            testConstants.displayContent.smsOptIn,
        ]);
    });
});

function generateDefaultProps() {
    return {
        cmsWidgetName: "CustomerWidget",
        customer: {
            firstName: testConstants.customer.firstName,
            lastName: testConstants.customer.lastName,
            phoneNumber: testConstants.customer.phoneNumber,
            emailAddress: testConstants.customer.emailAddress,
            isSmsOptIn: testConstants.customer.isSmsOptIn,
        },
    };
}

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