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,
    }),
  ],
  state: {
    makes: [],
    models: [],
    styles: [],
    year: "",
    make: "",
    model: "",
    style: "",
    slideTransition: "none",
    carImg:
      "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
    blurImg: true,
  },
  mutations: {
    updateYear(state, data) {
      state.year = data.year;
      state.makes = data.makes.data;
      state.slideTransition = "slide";
    },
    updateMake(state, data) {
      state.make = data.make;
      state.models = data.models.data;
      state.slideTransition = "slide";
    },
    updateModel(state, data) {
      state.model = data.model;
      state.styles = data.styles.data;
      state.slideTransition = "slide";
    },
    updateStyle(state, data) {
      state.style = data.style;
      state.carImg =
        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
      state.blurImg = false;
      state.slideTransition = "slide";
    },
    removeStyle(state) {
      state.style = "";
      state.blurImg = true;
      state.carImg =
        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
    },
  },
  actions: {
      getYears(){
        return globalMethods.callHttpClient({
          method: endpoints.GetYears.method,
          endpoint: endpoints.GetYears.url,
          payload:{}
        });
      },
      selectYear(context, { year }) {
        return globalMethods.callHttpClient({
          method: endpoints.GetMakes.method,
          endpoint: endpoints.GetMakes.url,
          payload:{
            "Year": year
          }
        });
      },
      selectMake({ commit, state }, { make }) {
        return globalMethods.callHttpClient({
          method: endpoints.GetModels.method,
          endpoint: endpoints.GetModels.url,
          payload:{
            "Year": state.year,
            "Make": make
          }
        });
      },
      selectModel({ commit, state }, { model }) {
        return globalMethods.callHttpClient({
          method: endpoints.GetStyles.method,
          endpoint: endpoints.GetStyles.url,
          payload:{
            "Year": state.year,
            "Make": state.make,
            "Model": model
          }
        });
      },
      getRouteInfo(context, { relativeUrl }) {
        return globalMethods.callHttpClient({
          method: endpoints.GetRouteInfoEndpoint.method,
          endpoint: endpoints.GetRouteInfoEndpoint.url,
          payload: {
            relativeUrl: relativeUrl,
          },
        });
      },
      // For mock data purposes only
      getMockPageData(context, { relativeUrl }) {
        return globalMethods.callMockHttpClient({
          method: endpoints.GetPageData.method,
          endpoint: relativeUrl,
          payload: {
          },
        });
      },
  },
});