import { mapStores } from "pinia";
import { useMainStore } from "@/store";

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;
    },
  },
  computed: {
    // store will be accessible globally as its id + 'Store'        
    ...mapStores(useMainStore),

    navigationScenarios() {
      return navigationScenarios;
    },
    vehicleCategories() {
      return vehicleCategories;
    },
    queryStrings(){
      return queryStrings;
    },
    dynamicStrings(){
      return dynamicStrings;
    },
    cssClassNameForCmsWidget(){
      return "widget-name-" + this.cmsWidgetName;
    },
  },
};