import { shallowMount } from '@vue/test-utils';
import replaceOptionsQuestion from '@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue';
import { getMountOptions } from '@/helpers/unit-test-helper.js';

/** @ignore */
function setupMocks({
    modelValueProp = ['Windshield'],
    isAvailable = true,
    isMultiSelect = false,
    filterByVehicleCategory = false,
    groupName = 'damageQuestion',
    cmsQuestionText = 'CMS text goes here',
    cmsAnswers = [{ Name: 'car-Windshield' }, { Name: 'car-BackDoor' }, { Name: 'car-FrontDoor' }],
    dataFromStoreApi = [],
    methodsToMock = []
}) {
    const mountOptions = getMountOptions({});

    // Mock props
    const mockMixin = {
        methods: {
            getCmsContent: jest.fn()
        }
    };
    mountOptions.propsData = {
        modelValue: modelValueProp,
        isAvailable,
        isMultiSelect,
        filterByVehicleCategory
    };
    mountOptions.mixins = [mockMixin];

    // Mock methods
    methodsToMock.forEach((methodName) => {
        replaceOptionsQuestion.methods[methodName] = jest.fn();
    });

    const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);

    // Mock CMS content
    const cmsContent = {
        groupName,
        QuestionText: cmsQuestionText,
        Answers: cmsAnswers
    };
    const replaceOptions = dataFromStoreApi;
    return { wrapper, cmsContent, replaceOptions };
}

describe('replace-options-question.vue', () => {
    test('Selected damage option is emitted upon selection.', async () => {
        // Arrange
        const { wrapper } = setupMocks({ modelValueProp: ['Windshield'] });
        const damageToSelect = ['Backseat'];

        // Act
        wrapper.setValue({ modelValue: damageToSelect });
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ modelValue: ['Backseat'] }]);
    });
});

describe('replace-options-question.vue', () => {
    test('Answers to display filtered by data from api.', async () => {
        // Arrange
        const { wrapper, cmsContent, replaceOptions } = setupMocks({
            dataFromStoreApi: ['Windshield', 'FrontDoor'],
            filterByVehicleCategory: true
        });

        // Act
        replaceOptionsQuestion.methods.initializeComponent.call(
            wrapper.vm,
            replaceOptions,
            'car-group'
        );

        // Assert
        expect(wrapper.vm.replaceOptions).toStrictEqual(['Windshield', 'FrontDoor']);
    });
});

describe('replace-options-question.vue', () => {
    test('when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedReplaceOptions',
        async () => {
        // Arrange
            const { wrapper, cmsContent, replaceOptions } = setupMocks({
                modelValueProp: []
            });
            wrapper.setData({
                answersFromCms: [
                    {
                        Name: 'Stationary'
                    },
                    {
                        Name: 'Slider'
                    }
                ]
            });
            wrapper.setData({ replaceOptions: ['Stationary'] });

            // Act
            wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);

            expect(wrapper.vm.selectedValues).toEqual([]);
        }
    );
});

describe('replace-options-question.vue', () => {
    test('when isAvailable is true, will run updateSelectedValues method', async () => {
        // Arrange
        const { wrapper, cmsContent, replaceOptions } = setupMocks({
            isAvailable: false,
            methodsToMock: ['updateSelectedValues']
        });

        // Act
        wrapper.vm.$options.methods.initializeComponent.call(
            wrapper.vm,
            cmsContent,
            replaceOptions,
            'car-group'
        );
        wrapper.vm.$options.watch.isAvailable.call(wrapper.vm, true);

        // Assert
        expect(replaceOptionsQuestion.methods.updateSelectedValues).toHaveBeenCalled();
        wrapper.unmount();
    });
});