import mobileDetails from "@/layouts/mobile-details/mobile-details.vue";
import { mount, shallowMount } from "@vue/test-utils";
import { storeActions } from "@/constants/store-actions";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";

const linkWidgetName = "linkWidgetName";
const modalWidgetName = "modalWidgetName";

const mockLinkCmsContent = {
    BodyText: "Sample link body text here.",
};

const mockModalCmsContent = {
    FooterText: "Sample modal footer text here.",
};

const mockMixin = {
    methods: {
        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
            if (widgetName === linkWidgetName) {
                return mockLinkCmsContent[cmsFieldName];
            }

            if (widgetName === modalWidgetName) {
                return mockModalCmsContent[cmsFieldName];
            }

            return null;
        }),
        dispatchStoreAction: jest.fn((actionName) => {
            if (actionName === storeActions.SAVE_MOBILE_DETAILS) {
                return true;
            }
        }),
    },
};

beforeEach(() => {
    store.getters = {
        order: {
            serviceLocation: {
                zipCode: "43235",
                zipCodeCtu: "00000",
                state: "OH",
                appointmentType: "Mobile",
                city: "Columbus",
                address: "123 Main St",
                address2: "Suite 100",
                isVehicleProtected: true,
            },
            schedule: {
                date: "2023-10-10",
                endTime: "14:00",
                startTime: "13:00",
                routeCode: "R1",
                jobMaxMinutes: "60",
                jobMinMinutes: "30",
            },
        },
        payment: {
            isInsurance: false,
        },
    };
});

describe("mobile-details.vue", () => {
    test("if the continue button is clicked, navigate forward", async () => {
        // Arrange
        const { wrapper } = setupMocks({
            mixins: [mockMixin],
            attachTo: document.body,
        });

        wrapper.setData({
            addressQuestions: {
                streetAddress: "Test Street",
                apartmentNumberOrBusinessName: "Test Apartment",
                city: "Test City",
                state: "TS",
                zipCode: "12345",
            },
            isVehicleProtected: true,
        });

        // Act
        await wrapper.vm.forwardButtonAction();

        // Assert
        expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
    });
    test("arePagePrerequisitesValid should be true ", async () => {
        //Arrange
        const { wrapper } = setupMocks({
            mixins: [mockMixin],
            attachTo: document.body,
        });

        //Act
        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

        //Assert
        expect(arePagePrerequisitesValid).toBe(true);
    });

    test("if the back button is clicked, navigate back", async () => {
        // Arrange
        const { wrapper } = setupMocks({
            mixins: [mockMixin],
            attachTo: document.body,
        });

        // Act
        await wrapper.vm.backButtonAction();

        // Assert
        expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
    });
});

function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
    const resultingMountOptions = getMountOptions({
        ...mountOptions,
        mixins,
        router: {
            navigate: jest.fn(),
            navigateWithSaving: jest.fn(),
            navigateWithoutSaving: jest.fn(),
        },
    });

    if (props) resultingMountOptions.propsData = props;
    resultingMountOptions["attachTo"] = document.body;
    const wrapper = isShallowMount
        ? shallowMount(mobileDetails, resultingMountOptions)
        : mount(mobileDetails, resultingMountOptions);

    return { wrapper };
}
