import { createStore } from "vuex";
import { endpoints } from "@/constants/endpoints.js";
import { storeMutations } from "@/constants/store-mutations";
import createPersistedState from "vuex-persistedstate";
import globalMethods from "@/global-methods";



// Export State
export const state = {
  order: {
    vehicle: {
      year: null,
      make: null,
      model: null,
      style: null,
      carId: null,
      category: null,
      imageUrl: null,
      imageVifNumber: null,
      imageColor: null,
    },
    damage: {
      isRepair: null,
      numberOfChips: null,
      glassToReplace: null,
    },
    lineItems:{
      glassParts: null,
      otherParts: null
    }
  },
  applicationUser: {
    eventBus: [],
    pageData: {}
  },
}

// Export Mutations
export const mutations = {
  // VEHICLE MUTATIONS
  updateYear(state, year) {
    state.order.vehicle.year = year;
  },
  updateMake(state, make) {
    state.order.vehicle.make = make;
  },
  updateModel(state, model) {
    state.order.vehicle.model = model;
  },
  updateStyle(state, style) {
    state.order.vehicle.style = style;
  },
  updateCarId(state, carId) {
    state.order.vehicle.carId = carId;
  },
  updateVehicleCategory(state, category) {
    state.order.vehicle.category = category;
  },
  updateVehicleImageUrl(state, imageUrl) {
    state.order.vehicle.imageUrl = imageUrl;
  },
  updateVehicleImageVifNumber(state, imageVifNumber) {
    state.order.vehicle.imageVifNumber = imageVifNumber;
  },
  updateVehicleImageColor(state, imageColor) {
    state.order.vehicle.imageColor = imageColor;
  },
  updateIsRepair(state, isRepair){
    state.order.damage.isRepair = isRepair;
  },
  updateNumberOfChips(state, numberOfChips){
    state.order.damage.numberOfChips = numberOfChips;
  },
  updateGlassToReplace(state, glassToReplace){
    state.order.damage.glassToReplace = glassToReplace;
  },
  updateParts(state, partsData){
    state.order.lineItems.glassParts = partsData;
  },
  updatePageData(state, pageData){
    state.applicationUser.pageData[pageData.page] = pageData.data;
  },

  // EVENT BUS MUTATIONS
  addEventToBus(state, event) {
    state.applicationUser.eventBus.push(event);
  },
  removeEventFromBus(state, eventData) {
    const matchedEvent = state.applicationUser.eventBus.find(
      ({ category, subCategory }) =>
        category === eventData.category &&
        subCategory === eventData.subCategory
    );
    const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);

    // If the item exists, remove it.
    if (itemIndex > -1) {
      state.applicationUser.eventBus.splice(itemIndex, 1);
    }
  },

  // DEPENDENCY MUTATIONS
  resetVehicleState(state) {
    state.order.vehicle.year = null;
    state.order.vehicle.make = null;
    state.order.vehicle.model = null;
    state.order.vehicle.style = null;
    state.order.vehicle.carId = null;
    state.order.vehicle.category = null;
  },
  resetDamageState(state) {
    state.order.damage.isRepair = null;
    state.order.damage.numberOfChips = null;
    state.order.damage.windshieldGlassToReplace = null;
    state.order.damage.driverSideGlassToReplace = null;
    state.order.damage.passengerSideGlassToReplace = null;
    state.order.damage.rearGlassToReplace = null;

  },
  resetRegistrationState(state) {

  },
  resetPartsState(state) {
    state.glassParts = null;
    state.childParts = null;
    state.otherParts = null;
  }
}

// Export Getters
export const getters = {
  vehicle: (state) => state.order.vehicle,
  eventBusItem: (state) => (eventCategory, eventSubCategory) => {
    const matchedEvent = state.applicationUser.eventBus.find(
      ({ category, subCategory }) =>
        category === eventCategory && subCategory === eventSubCategory
    );

    return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
  },
  eventBus: (state) => state.applicationUser.eventBus,
  damage: (state) => state.order.damage,
  lineItems: (state) => state.order.lineItems,
  pageData: (state) => (page) => {
    return state.applicationUser.pageData[page];
  }
}

// Export Actions
export const actions = {
  // Vehicle API Actions
  getVehicleYears(context) {
    return globalMethods.callHttpClient({
      method: endpoints.GetVehicleYears.method,
      endpoint: endpoints.GetVehicleYears.url,
      payload: {},
    });
  },
  lookupVehicleByYmms(context, { year, make, model, style }) {
    return globalMethods.callHttpClient({
      method: endpoints.LookupVehicleByYmms.method,
      endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`,
      payload: {},
    });
  },
  lookupVehicleByVin(context, { vin }) {
    return globalMethods.callHttpClient({
      method: endpoints.LookupVehicleByVin.method,
      endpoint: endpoints.LookupVehicleByVin.url,
      payload: {
        vin: vin, // EX "1J4GW58S4XC541166"
      },
    });
  },
  getVehicleMakes(context, { year }) {
    return globalMethods.callHttpClient({
      method: endpoints.GetVehicleMakes.method,
      endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
      payload: {},
    });
  },
  getVehicleModels(context, { year, make }) {
    return globalMethods.callHttpClient({
      method: endpoints.GetVehicleModels.method,
      endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
      payload: {},
    });
  },
  getVehicleStyles(context, { year, make, model }) {
    return globalMethods.callHttpClient({
      method: endpoints.GetVehicleStyles.method,
      endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
      payload: {},
    });
  },
  setVehicle(context, { year, make, model, style }) {
    return globalMethods
      .callHttpClient({
        methods: endpoints.GetVehicle.method,
        endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
        payload: {},
      })
      .then((response) => {
        context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId);
        context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category);
        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, response.data.imageUrl);
        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, response.data.imageVifNumber);
        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, response.data.imageVifColor);
        return response;
      });
  },
  getDamageOptions(context, { carId }) {
    return globalMethods.callHttpClient({
      methods: endpoints.GetDamageOptions.method,
      endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
      payload: {},
    });
  },

  // DEPENDENCY ACTIONS
  resetVehicleAndDependencies(context) {
    context.commit(storeMutations.RESET_VEHICLE_STATE);
    context.commit(storeMutations.RESET_DAMAGE_STATE);
    context.commit(storeMutations.RESET_REGISTRATION_STATE);
  },
  resetDamageAndDependencies(context) {
    context.commit(storeMutations.RESET_DAMAGE_STATE);
    context.commit(storeMutations.RESET_PARTS_STATE);
  },
  resetRegistrationAndDependencies(context) {
    context.commit(storeMutations.RESET_REGISTRATION_STATE);
    context.commit(storeMutations.RESET_PARTS_STATE)
  },
  resetPartsAndDependencies(context) {
    context.commit(storeMutations.RESET_PARTS_STATE);
  },

  // Content API Actions
  getRouteInfo(context, { pageName }) {
    return globalMethods.callHttpClient({
      method: endpoints.GetRouteInfo.method,
      endpoint: endpoints.GetRouteInfo.url,
      payload: {
        pageName: pageName,
      },
    });
  },
  getHomepageName(context) {
    return globalMethods.callHttpClient({
      method: endpoints.GetHomepageInfo.method,
      endpoint: endpoints.GetHomepageInfo.url,
    });
  },
  getPageData(context, { pageName }) {
    return globalMethods.callHttpClient({
      method: endpoints.GetPageData.method,
      endpoint: `${endpoints.GetPageData.url}/${pageName}`,
      payload: {},
    });
  },
  getEvoxImage(context, { relativeUrl }) {
    return globalMethods.callHttpClient({
      method: endpoints.GetPageData.method,
      endpoint: relativeUrl,
      payload: {},
    });
  },

  // Parts API Actions
  getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {
    return globalMethods.callHttpClient({
      method: endpoints.GetPartsOrQuestions.method,
      endpoint: endpoints.GetPartsOrQuestions.url,
      payload: {
        carId: carId,
        glass: glassArray,
        zip: zipCode,
        vin: vin
      },
    });
  }
}

export default createStore({
  plugins: [createPersistedState()],

  // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
  //    * The CMS can reference the fields by name
  //    * Return users may have a previous "version" of the model, and we don't want
  //      them to have a breaking experience, because the model might have changed.
  state,
  mutations,
  getters,
  actions,
});