<template>
    <transition name="fade" mode="out-in">
        <div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
            <buttonQuestion
                :questionText="questionText"
                :answers="answersFromCms"
                :groupName="groupName"
                buttonType="listButtonHorizontal"
                useTextForValue
                v-model="selectedChipCountValues"
            />
        </div>
    </transition>
</template>

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

export default ({
    name: "windshieldOptions",
    data(){
        return {
            questionText: String,
            answersFromCms: Array
        }
    },    
    props: {
        modelValue: Array,
        groupName: String,
        isAvailable: Boolean,
    },
    methods: {
        initializeComponent(cmsContent){
            this.questionText = cmsContent.QuestionText;
            this.answersFromCms = cmsContent.Answers;
        }
    },
    computed: {
        selectedChipCountValues: {
            get: function() {
                return this.modelValue;
            },
            set: function(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        },
    },
    components: {
        buttonQuestion,
    }
})
</script>