<template>
    <div class="cash-or-insurance-question">
        <buttonQuestion
            :answers="answersFromCms"
            :groupName="groupName"
            buttonTypeString="listButtonHorizontal"
            v-model="selectedValues"
            isRequired />
    </div>
</template>

<script>
import buttonQuestion from "@/digital-components/button-question/button-question";

const cashAnswer = "CashAnswer";
const insuranceAnswer = "InsuranceAnswer";

export default {
    name: "cashOrInsuranceQuestion",
    props: {
        modelValue: String,
        groupName: String,
        cmsWidgetName: String,
    },
    computed: {
        answersFromCms() {
            const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
            if (answers) {
                answers.forEach(
                    (answer) => (answer.additionalButtonData = this.additionalButtonData)
                );
            }
            return answers;
        },
        additionalButtonData() {
            return {
                additionalButtonStyling: "listButtonHorizontalStrong",
            };
        },
        selectedValues: {
            get: function () {
                // Convert to CMS answer name from bool
                const cmsAnswerValue = this.modelValue ? insuranceAnswer : cashAnswer;
                return cmsAnswerValue;
            },
            set: function (newValue) {
                // Convert back to bool for parent component
                this.$emit("update:modelValue", newValue === insuranceAnswer);
            },
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>
