import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";
import { storeMutations } from "@/constants/store-mutations";
import { storeActions } from "@/constants/store-actions";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";

import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";

import store from "@/store";

jest.mock("@/store", () => ({
  commit: jest.fn(),
  dispatch: jest.fn(),
  getters: {
    applicationUser: {
      experiments: []
    }
  }
}));

// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
  settleAllPromises: jest.fn(),
}));

// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
  fetchCmsContentForPage: jest.fn(),
}));

describe("vehicle-year.vue", () => {
  test("Year question component is initized with api data", async (done) => {
    //Arrange
    const yearQuestionInitialData = ["2023", "2022", "2021"];
    const { wrapper, apiPromise } = setupMocks({
      yearQuestionInitialData: yearQuestionInitialData,
    });

    //Act
    vehicleYear.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-year" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    //Assert
    apiPromise.finally(() => {
      expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(
        yearQuestionInitialData
      );
      done();
    });
  });
});

describe("vehicle-year.vue", () => {
  test("arePagePrerequisitesValid should be true ", async () => {
    //Arrange
    const { wrapper } = setupMocks({});

    //Act
    vehicleYear.beforeRouteEnter.call(
      wrapper.vm,
      { query: { fmgPage: "vehicle-make" } },
      undefined,
      (c) => c(wrapper.vm)
    );

    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
    await nextTick();

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

function setupMocks({
  vehicleYearQuestionCmsContent = {},
  yearQuestionInitialData = {},
  pageHeaderWidgetHeaderText = {},
  mountOptionsMockData = {},
}) {
  //Mock api responses
  const apiResponses = {
    cmsContent: {
      FunnelSubHeaderWidget: { HeaderText: pageHeaderWidgetHeaderText },
      VehicleYearQuestion: vehicleYearQuestionCmsContent,
      VehicleBannerWidget: {
        GenericVehicleImage:
          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
      },
      FunnelHeaderWidget: {
        LogoImage:
          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
      },
    },
    yearQuestionInitialData: yearQuestionInitialData,
  };
  const apiPromise = Promise.resolve(apiResponses);

  settleAllPromises.mockImplementation(() => apiPromise);
  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());

  //Mock year question methods
  yearQuestion.methods = {
    loadInitialData: jest.fn(),
    initializeComponent: jest.fn(),
  };

  const mountOptions = getMountOptions(mountOptionsMockData);
  const wrapper = shallowMount(vehicleYear, mountOptions);
  const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
  yearQuestionWrapper.vm.initializeComponent =
    yearQuestion.methods.initializeComponent;
  wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;

  return { wrapper, apiPromise };
}