// Components
import customerReview from '@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.vue';

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

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

function generateDefaultProps() {
    return {
        cmsWidgetName: 'CustomerWidget',
        customer: {
            firstName: testConstants.customerInfo.firstName,
            lastName: testConstants.customerInfo.lastName,
            servicePhone: testConstants.customerInfo.servicePhone,
            emailAddress: testConstants.customerInfo.emailAddress,
            isSmsOptIn: testConstants.customerInfo.isSmsOptIn
        }
    };
}

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

function getShallowMountedComponent(initialData = {}, methodToRun = () => {}) {
    const mountOptions = getMountOptions({
        router: {
            navigate: jest.fn()
        }
    });

    methodToRun();

    mountOptions.data = () => (
        initialData
    );

    mountOptions.mixins = [mockMixin];

    const wrapper = shallowMount(customerReview, mountOptions);
    return { wrapper };
}

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

describe('Customer Review Block', () => {
    test('Should display header text from cms', async () => {
        // Arrange
        const props = generateDefaultProps();
        const { wrapper } = getShallowMountedComponent({
            ...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
        const props = generateDefaultProps();

        const { wrapper } = getShallowMountedComponent({
            ...props
        });

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

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

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

        const { wrapper } = getShallowMountedComponent({
            ...props
        });

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

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