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 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,
        category: 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;
    },
    updateMake(state, make) {
      state.order.vehicle.make = make;
    },
    updateModel(state, model) {
      state.order.vehicle.model = model;
    },
    updateStyle(state, style) {
      state.order.vehicle.style = style;
    },
    updateVehicle(state, data) {
      state.order.vehicle.carId = data.carId;
      state.order.vehicle.category = data.category;
    }
  },
  getters: {
    vehicle: state => state.order.vehicle
  },
  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_VEHICLE, response.data);
        return response;
      });
    },
    getDamageOptions(context, {carId}){
      return globalMethods.callHttpClient({
        methods: endpoints.GetDamageOptions.method,
        endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
        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: {},
      });
    },
  },
});