// Components
import
serviceLocationReview from '@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue';

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

const cmsContent = {
    ServiceLocationTitleWidget: {
        Text: 'Title Text'
    }
};

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

function generateDefaultProps() {
    return {
        cmsWidgetName: 'ServiceLocationTitleWidget',
        serviceLocation: {
            address: 'Mobile Address 1',
            address2: 'Mobile Address 2',
            city: 'Mobile City',
            state: 'MO',
            zipCode: '11111',
            zipCodeCtu: '',
            appointmentType: AppointmentTypeStrings.MOBILE,
            isVehicleProtected: false,
            provider: {
                providerNumber: '',
                address: {
                    streetAddress: 'Service Location Address',
                    city: 'Service Location City',
                    state: 'SL',
                    zipCode: '22222',
                    zipCodeCtu: ''
                }
            }
        }
    };
}

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

    methodToRun();

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

    mountOptions.mixins = [mockMixin];

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

describe('Service Location Review Block', () => {
    test('Should render mobile address if mobile appointment', async () => {
        // Arrange
        const props = generateDefaultProps();
        const { wrapper } = getShallowMountedComponent({
            ...props
        });

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

        // Assert
        expect(wrapper.vm.displayContent).toEqual([
            'Mobile Address 1, Mobile Address 2, Mobile City, MO 11111'
        ]);
    });

    test('Should render service location address if inshop appointment.', async () => {
        // Arrange
        const props = generateDefaultProps();
        props.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;

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

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

        // Assert
        expect(wrapper.vm.displayContent).toEqual([
            'Service Location Address, Service Location City, SL 22222'
        ]);
    });

    test('Should render service location address if drop-off appointment', async () => {
        // Arrange
        const props = generateDefaultProps();
        props.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;

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

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

        // Assert
        expect(wrapper.vm.displayContent).toEqual([
            'Service Location Address, Service Location City, SL 22222'
        ]);
    });

    test('Should not add comma or any text if address2 is null', async () => {
        // Arrange
        const props = generateDefaultProps();
        props.serviceLocation.address2 = null;

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

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

        // Assert
        expect(wrapper.vm.displayContent).toEqual(['Mobile Address 1, Mobile City, MO 11111']);
    });
});
