<template>
    <reviewBlock
        :headerCmsWidgetName="cmsWidgetName"
        :content="displayContent" />
</template>

<script>
import damageLocationsSelected from '@/constants/damage-locations-selected.js';
import { useMainStore } from '@/store';
import { getDamageDisplayContent, getLocationAnswer } from '@/helpers/damage-review-content-generator.js';
import reviewBlock from '@/layouts/payment-method/review-dropdown/review-block/review-block.vue';

export default {
    name: 'damage-review',
    components: {
        reviewBlock
    },
    props: {
        cmsWidgetName: String,
        damageLocationsWidgetName: String,
        damage: Object
    },
    computed: {
        displayContent() {
            const { glassToReplace, isRepair } = useMainStore().order.damage;
            return getDamageDisplayContent(
                this.locationAnswers,
                this.driverSideDamageAnswers,
                this.passengerSideDamageAnswers,
                glassToReplace,
                isRepair
            );
        },
        driverSideDamageAnswers() {
            const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
        },
        passengerSideDamageAnswers() {
            const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
        },
        locationAnswers() {
            return this.getInputQuestionWidgetAnswersNullSafe(this.damageLocationsWidgetName);
        }
    }
};
</script>
