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 { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { partTypeStrings } from "../constants/part-type-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]
                : "";
        },
        dispatchStoreAction(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. Cannot use .prevent modifier for vee-validate Form
        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();
            }
        },
        getFooterInfoBoxHeight() {
            const footerInfoBox = document.querySelector(".footer#infoBox");
            return footerInfoBox ? footerInfoBox.offsetHeight : 0;
        },
        async getZipCodeData(zipCode) {
            const serviceZipValidationResponse = await this.dispatchStoreAction(
                storeActions.VALIDATE_ZIP,
                { zip: zipCode }
            );

            return {
                isValid: serviceZipValidationResponse.data.isValid,
                isServiceable: serviceZipValidationResponse.data.isServiceable,
                state: serviceZipValidationResponse.data.state,
            };
        },
        getTierOnePackagePrice(lineItems) {
            let totalPrice = 0;
            lineItems.forEach((lineItem) => {
                const partType = lineItem.partType.toUpperCase();
                if (
                    partType != partTypeStrings.FRONT_WIPER &&
                    partType != partTypeStrings.REAR_WIPER &&
                    partType != partTypeStrings.RAIN_DEFENSE
                ) {
                    totalPrice += lineItem.price;
                }
            });
            return totalPrice;
        },
    },
    computed: {
        storeActions() {
            return storeActions;
        },
        storeMutations() {
            return storeMutations;
        },
        navigationScenarios() {
            return navigationScenarios;
        },
        vehicleCategories() {
            return vehicleCategories;
        },
        routerParams() {
            return routerParams;
        },
        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]);
        });
    }
}