import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { settleAllPromises } from "@/helpers/layout-helper";

export default {
  data() {
    return {
      cmsContentByWidget: {}
    };
  },
  methods: {
    setCmsContent(cmsContent) {
      this.$root.cmsContentByWidget = cmsContent;
    },
    getCmsContent(widgetName, fieldName) {
      return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
    },
    dispatchStoreAction(type, payload, encodePayload = true) {
      // Encode the payload if required
      if (encodePayload) {
        encodeUriData(payload);
      }

      return store.dispatch(type, payload);
    },
    savePageDataToStore(page, data) {
      store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
    },
    onSubmit() { }, // DO NOT REMOVE; needed to prevent default form submit behavior. Cannot use .prevent modifier for vee-validate Form
    onInvalidSubmit({ values, errors, results }) {
      // identify the first error field and put focus on it
      // get error names array
      const errorNames = errors ? Object.keys(errors) : [];
      const firstErrorEl = errorNames[0];
      if (firstErrorEl) {
        const qsString = "[data-focus-target='" + firstErrorEl + "']";
        const el = document.querySelector(qsString);
        el && el.focus();
      }
    },
    getFooterInfoBoxHeight() {
      const footerInfoBox = document.querySelector(".footer#infoBox");
      return footerInfoBox ? footerInfoBox.offsetHeight : 0;
    },
    async getZipCodeData(zipCode) {
      const serviceZipValidationResponse = await this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: zipCode });
      
      return { 
        isValid: serviceZipValidationResponse.data.isValid, 
        isServiceable: serviceZipValidationResponse.data.isServiceable,
        state: serviceZipValidationResponse.data.state
      };
    }
  },
  computed: {
    storeActions() {
      return storeActions;
    },
    storeMutations() {
      return storeMutations;
    },
    navigationScenarios() {
      return navigationScenarios;
    },
    vehicleCategories() {
      return vehicleCategories;
    },
    routerParams() {
      return routerParams;
    },
    queryStrings(){
      return queryStrings;
    },
    dynamicStrings(){
      return dynamicStrings;
    },
    cssClassNameForCmsWidget(){
      return "widget-name-" + this.cmsWidgetName;
    },
  },
};

function encodeUriData(payload) {
  if (payload && Object.keys(payload).length > 0) {
    // Loop through the payload and encode the values
    Object.keys(payload).forEach((key) => {
      payload[key] = encodeURIComponent(payload[key]);
    });
  }
}