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

export default createStore({
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
    }),
  ],

  // 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: {
    order: {
      vehicle: {
        year: null,
        make: null,
        model: null,
        style: null,
        vin: null,
        licensePlate: null,
        carId: null,
        evoxImageId: null,
        hasSplitWindshieldOption: null,
        hasBackglassSliderOption: null,
        registration: {
          rawAddress: null,
          zipCode: null,
          firstName: null,
          lastName: null,
          licensePlate: null
        },
        damage: {
          isRepair: null,
          isReplacement: null,
          numberOfChips: null,
          glassToReplace: null,
          problemGlassQuestionAnswers: null,
          problemMoldingQuestionAnswers: null,
          problemPropertyQuestionAnswers: null,
        },
        lineItems: null,
        customer: {
          emailAddress: null,
        },
        payment: {
          isInsurance: null,
          isCash: null,
        },
        referralSeqNum: null,
      }
    },
    applicationUser: {
      experiments: null,
    }
  },
  // See IMPORTANT note at top of "state" declaration.

  mutations: {
    updateYear(state, year){
      state.order.vehicle.year = year;
    },
  },
  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: {},
      });
    },

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