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

/** @ignore */
function setupMocks({
    modelValueProp = ['DriverSide'],
    groupName = 'sideDoorOptions',
    cmsQuestionText = 'CMS text goes here',
    cmsAnswers = [{ Name: 'Car-DriverSide' }, { Name: 'Car-PassengerSide' }],
    driverSideReplaceOptions = ['FrontDoor', 'BackDoor'],
    passengerSideReplaceOptions = ['FrontDoor', 'BackDoor'],
    driverSideOptions = ['Car-FrontDoor', 'Car-BackDoor'],
    passengerSideOptions = ['Car-FrontDoor', 'Car-BackDoor'],
    selectedDamageLocations = ['SideDoor']
}) {
    const mountOptions = getMountOptions({
    });

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

    const wrapper = shallowMount(sideDoorOptions, mountOptions);

    const OptionsWrapper = wrapper.findAllComponents({ name: 'replaceOptionsQuestion' });
    OptionsWrapper[0].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
    OptionsWrapper[1].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
    // Mock CMS content
    const cmsContent = {
        groupName,
        QuestionText: cmsQuestionText,
        Answers: cmsAnswers
    };
    return {
        wrapper,
        cmsContent,
        driverSideReplaceOptions,
        passengerSideReplaceOptions,
        driverSideOptions,
        passengerSideOptions
    };
}

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

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

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

// TODO: Add () to toHaveBeenCalled and ensure the test passes
describe.skip('replace-options-question.vue', () => {
    test('Selected door side option is updated when selection made.', async () => {
        // Arrange
        const { wrapper } = setupMocks({});

        // Act
        wrapper.vm.selectedDoorSidesValues = ['DriverSide'];
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
    });
});

// TODO: Add () to toHaveBeenCalled and ensure the test passes
describe.skip('replace-options-question.vue', () => {
    test('Selected driver side option is updated when selection made.', async () => {
        // Arrange
        const { wrapper } = setupMocks({});

        // Act
        wrapper.vm.selectedDriverSideReplaceOptionsValues = ['FrontDoor'];
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
    });
});

// TODO: Add () to toHaveBeenCalled and ensure the test passes
describe.skip('replace-options-question.vue', () => {
    test('Selected passenger side option is updated when selection made.', async () => {
        // Arrange
        const { wrapper } = setupMocks({});

        // Act
        wrapper.vm.selectedPassengerSideReplaceOptionsValues = ['BacktDoor'];
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
    });
});

describe('replace-options-question.vue', () => {
    test('Answers to display filtered by data from api.', async () => {
        // Arrange
        const {
            wrapper,
            cmsContent,
            driverSideReplaceOptions,
            passengerSideReplaceOptions,
            driverSideOptions,
            passengerSideOptions
        } = setupMocks({});

        // Act
        sideDoorOptions.methods.initializeComponent.call(
            wrapper.vm,
            cmsContent,
            driverSideReplaceOptions,
            passengerSideReplaceOptions,
            driverSideOptions,
            passengerSideOptions,
            'car-group'
        );

        // Assert
        expect(wrapper.vm.answersToDisplay).toStrictEqual([]);
    });
});
