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 { queryStrings } from "@/constants/query-strings";

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] : '';
    },
    dispatchNonBlockingStoreAction(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
    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();
      }
    },

    pushEventToGA(category, action, label, value, pageName) {
      const eventToBePushed = {
        'event': 'ga_event',
        'category': category,
        'action': action,
        'label': label,
        'value': value,
        'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`
      }
      pushToDataLayerIfDefined(eventToBePushed);
    },

    pushPageViewToGA(pageName) {
      const pageViewEvent = {
        'event': 'logPageview',
        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`,
        'pageTitle': pageName
      };
      pushToDataLayerIfDefined(pageViewEvent);
    }

  },
  computed: {
    storeActions() {
      return storeActions;
    },
    storeMutations() {
      return storeMutations;
    },
    navigationScenarios() {
      return navigationScenarios;
    },
    vehicleCategories() {
      return vehicleCategories;
    },
  },
};

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]);
    });
  }
}

function pushToDataLayerIfDefined(data) {
  if (window.dataLayer !== undefined) {
    window.dataLayer.push(data);
  }
}