<template>
    <reviewBlock
        :customHeaderText="header"
        :content="displayContent"
        :editLinkText="editLinkText" />
</template>

<script>
import { getStringWithCustomValues, processIfStatements } from '@/helpers/cms-content-helper';
import { getGlassList } from '@/helpers/damage-helper';
import reviewBlock from '@/layouts/payment-method/review-dropdown/review-block/review-block.vue';

export default {
    name: 'vehicle-review',
    components: {
        reviewBlock
    },
    props: {
        cmsWidgetName: String
    },
    data() {
        return {};
    },
    computed: {
        header() {
            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
        },
        displayContent() {
            return [this.getCmsContentWithCustomValues(this.cmsWidgetName, 'BodyText')];
        },
        editLinkText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        },
        customValueMap() {
            return {
                glassList: this.glassList,
            };
        },
        glassList() {
            const glassPieces = this.mainStore.lineItems.glassParts?.map((part) => part.partType.toLowerCase()) ?? [];
            return getGlassList(glassPieces);
        },
    },
    methods: {
        getCmsContentWithCustomValues(widgetName, widgetField) {
            const rawText = this.getCmsContent(widgetName, widgetField);
            const processedIfStatements = processIfStatements(
                rawText,
                'custom',
                (v) => this.customValueMap[v]
            );
            return getStringWithCustomValues(processedIfStatements, this.customValueMap);
        }
    }
};
</script>
