<template>
    <reviewBlock
        :headerCmsWidgetName="cmsWidgetName"
        :content="displayContent"
        @edit-clicked="editClicked" />
</template>

<script>
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";

export default {
    name: "damage-review",
    props: {
        cmsWidgetName: String,
        damageLocationsWidgetName: String,
        damage: Object,
    },
    data() {
        return {};
    },
    methods: {
        editClicked() {
            this.$emit("edit-clicked");
        },
        getAnswersNullSafe(widgetName) {
            const rawAnswers = this.getCmsContent(widgetName, "Answers");

            return rawAnswers ? rawAnswers : [];
        },
        getLocationAnswer(damageLocation) {
            return this.locationAnswers?.find((answer) => answer.Name === damageLocation);
        },
        getGlassPieces(damageLocation) {
            return this.damage?.glassToReplace?.filter(
                (item) => item.glassLocation === damageLocation
            );
        },
        generateBulletedListFromAnswers(answers) {
            let list = "<ul>";

            answers.forEach((answer) => {
                list += `<li>${answer.Text}</li>`;
            });

            list += "</ul>";

            return list;
        },
    },
    computed: {
        displayContent() {
            return [
                ...this.windshieldCopy,
                ...this.driverSideCopy,
                ...this.passengerSideCopy,
                ...this.rearCopy,
            ];
        },
        hasWindshieldDamage() {
            const windshieldPieces = this.getGlassPieces(damageLocationsSelected.WINDSHIELD);

            return this.damage.isRepair || !!windshieldPieces?.length;
        },
        hasDriverSideDamage() {
            const driverPieces = this.getGlassPieces(damageLocationsSelected.DRIVER);

            return !!driverPieces?.length;
        },
        hasPassengerSideDamage() {
            const passengerPieces = this.getGlassPieces(damageLocationsSelected.PASSENGER);

            return !!passengerPieces?.length;
        },
        hasRearDamage() {
            const rearPieces = this.getGlassPieces(damageLocationsSelected.REAR);

            return !!rearPieces?.length;
        },
        windshieldCopy() {
            const answerContent = this.getLocationAnswer(damageLocationsSelected.WINDSHIELD);

            if (this.hasWindshieldDamage) {
                return [answerContent?.Text];
            } else {
                return [];
            }
        },
        driverSideCopy() {
            const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER);
            const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName);
            const driverSideItems = this.getGlassPieces(damageLocationsSelected.DRIVER);
            const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
                driverSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName)
            );

            if (this.hasDriverSideDamage) {
                return [
                    answerContent?.Text,
                    this.generateBulletedListFromAnswers(damageAnswersOnOrder),
                ];
            } else {
                return [];
            }
        },
        passengerSideCopy() {
            const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER);
            const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName);
            const passengerSideItems = this.getGlassPieces(damageLocationsSelected.PASSENGER);
            const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
                passengerSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName)
            );

            if (this.hasPassengerSideDamage) {
                return [
                    answerContent?.Text,
                    this.generateBulletedListFromAnswers(damageAnswersOnOrder),
                ];
            } else {
                return [];
            }
        },
        rearCopy() {
            const answerContent = this.getLocationAnswer(damageLocationsSelected.REAR);

            if (this.hasRearDamage) {
                return [answerContent?.Text];
            } else {
                return [];
            }
        },
        locationAnswers() {
            return this.getAnswersNullSafe(this.damageLocationsWidgetName);
        },
    },
    components: {
        reviewBlock,
    },
};
</script>
