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';
import routerParams from '@/router/router-constants/router-params';

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;
        },
        savePageDataToStore(page, data) {
            useMainStore().updatePageData({ page, data });
        }
    },
    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}`;
        },
        routerParams() {
            return routerParams;
        }
    }
};