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';
import widgetFields from '@/constants/cms-widget-fields.js';

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] : '';
        },
        getInputQuestionWidgetAnswersNullSafe(widgetName) {
            const rawAnswers = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS);
            return rawAnswers || [];
        },
        getFooterInfoBoxHeight() {
            const footerInfoBox = document.querySelector('.footer#infoBox');
            return footerInfoBox ? footerInfoBox.offsetHeight : 0;
        },
        navigateBack(vm, scenario = this.navigationScenarios.CLICKED_BACK) {
            const self = vm ?? this;

            self.$router.navigateWithSpinner(scenario, self.$route);
        },
        savePageDataToStore(page, data) {
            useMainStore().updatePageData({ page, data });
        },
        scrollToPageTop() {
            const container = document.getElementsByClassName('fade-on-route-transition')[0];
            container.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
        },
        scrollToPageBottom() {
            const container = document.getElementsByClassName('fade-on-route-transition')[0];
            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: 'smooth' });
        }
    },
    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;
        }
    }
};
