import { mapActions, mapStores } from "pinia";
import { useMainStore } 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";
import { dynamicStrings } from "@/constants/dynamic-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] : '';
    },
    getFooterInfoBoxHeight() {
      const footerInfoBox = document.querySelector(".footer#infoBox");
      return footerInfoBox ? footerInfoBox.offsetHeight : 0;
    },
    dispatchStoreAction(type, payload, encodePayload = true) {

      const store = useMainStore();
      // Encode the payload if required
      if (encodePayload) {
          encodeUriData(payload);
      }
      
      return store[type](payload);
    },
    savePageDataToStore(page, data) {
      // TODO: Fix this!
      //this.useMainStore.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
    },
  },
  computed: {
    // store will be accessible globally as its id + 'Store'        
    //...mapStores(useMainStore),

    storeActions() {
      return storeActions;
    },
    navigationScenarios() {
      return navigationScenarios;
    },
    vehicleCategories() {
      return vehicleCategories;
    },
    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]);
    });
  }
}