import { shallowMount } from "@vue/test-utils";
import vehicleBanner from "./vehicle-banner";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
import { vehicleCategories } from "@/constants/vehicle-categories.js";

jest.mock(
    "@/store",
    () => {
        return {};
    },
    { virtual: true }
);

describe("vehicleBanner", () => {
    test("renders the blurrycar image", async () => {
        // Arrange
        const { wrapper } = setupMocks({
            displayGenericVehicleImageProp: true,
            imageUrlValue: "NULL",
            displayUnmatchedVehicleIconProp: true,
        });

        // Assert
        expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
        expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
        wrapper.unmount();
    });
});

describe("vehicleBanner", () => {
    test("renders expected vehicle image", async () => {
        // Arrange
        const { wrapper } = setupMocks({
            displayGenericVehicleImageProp: false,
            imageUrlValue: "url_to_vehicle_image",
        });

        // Assert
        expect(wrapper.vm.vehicleImageToDisplay).toEqual("url_to_vehicle_image");
        expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
        wrapper.unmount();
    });
});

describe("vehicleBanner", () => {
    test("should render car icon when imageUrl is null and category is default", async () => {
        // Arrange
        const { wrapper } = setupMocks({
            displayGenericVehicleImageProp: false,
            imageUrlValue: "NULL",
        });

        var iconUrl = wrapper.vm.vehicleImageToDisplay;

        // Assert
        expect(iconUrl).toEqual(undefined);
        wrapper.unmount();
    });
});

const params = [
    ["CAR", "car_icon_url"],
    ["TRUCK", "truck_icon_url"],
    ["VAN", "van_icon_url"],
    ["COMMERCIAL VAN", "commercial_van_icon_url"],
    ["SUV", "suv_icon_url"],
    ["OTHER", "car_icon_url"],
];

describe("vehicleBanner", () => {
    test.each(params)(
        "renders an icon instead of an image for %s and %s",
        async (category, expectedIcon) => {
            // Arrange
            const { wrapper, cmsContent } = setupMocks({
                displayGenericVehicleImageProp: false,
                imageUrlValue: expectedIcon,
                categoryValue: category,
            });
            //Act
            var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
            // Assert
            expect(store.getters.vehicle.category).toEqual(category);
            expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
            wrapper.unmount();
        }
    );
});

function setupMocks({
    displayGenericVehicleImageProp,
    displayUnmatchedVehicleIconProp,
    imageUrlValue,
    categoryValue = "CAR",
}) {
    const mockGetCmsContent = jest.fn();
    mockGetCmsContent((cmsWidget, field) => {
        return field;
    });
    const mockMixin = {
        methods: {
            getCmsContent: mockGetCmsContent,
        },
    };
    //Mock store
    store.dispatch = jest.fn(() => {});
    store.getters = { vehicle: { category: categoryValue, imageUrl: imageUrlValue } };
    const mountOptions = getMountOptions({
        store: {
            dispatch: store.dispatch,
            getters: store.getters,
        },
    });

    //Mock props
    mountOptions.propsData = {
        displayGenericVehicleImage: displayGenericVehicleImageProp,
        displayUnmatchedVehicleIconProp: displayUnmatchedVehicleIconProp,
    };
    mountOptions.mixins = [mockMixin];
    const wrapper = shallowMount(vehicleBanner, mountOptions);

    //Mock CMS content
    const cmsContent = {
        GenericVehicleImage: "image_url",
        CarUnmatchedVehicleIcon: "car_icon_url",
        TruckUnmatchedVehicleIcon: "truck_icon_url",
        VanUnmatchedVehicleIcon: "van_icon_url",
        CommercialVanUnmatchedVehicleIcon: "commercial_van_icon_url",
        SuvUnmatchedVehicleIcon: "suv_icon_url",
    };
    return { wrapper, cmsContent };
}
