<template>
    <transition name="fade" mode="out-in">
        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
            <buttonQuestion
                isWide
                :questionText="questionText"
                :isMultiSelect="isMultiSelect"
                :answers="answersToDisplay"
                :groupName="groupName"
                buttonType="listCard"
                v-model="selectedValues"
                :validationRules="validationRules"
                :suppressError="suppressError"
            />
        </div>
    </transition>
</template>

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

export default ({
    name: "replaceOptionsQuestion",
    data(){
        return {
            questionText: String,
            answersFromCms: Array,
            replaceOptions: Array,
        }
    },
    props: {
        isAvailable: Boolean,
        filterByVehicleCategory: Boolean,
        groupName: String,
        modelValue: Array,
        isMultiSelect: Boolean,
        validationRules: String,
        suppressError: Boolean,
    },
    methods: {
        initializeComponent(cmsContent, replaceOptions){
            this.questionText = cmsContent.QuestionText;
            this.answersFromCms = cmsContent.Answers;
            this.replaceOptions = replaceOptions;
        },
        updateSelectedValues() {
            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
                this.selectedValues = [this.answersToDisplay[0].Name];
            }
        },
    },
    computed: {
        selectedValues: {
            get: function() {
                return this.modelValue;
            },
            set: function(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        },
        answersToDisplay(){
            const filteredAnswers = Array.isArray(this.answersFromCms) 
                ? this.answersFromCms.filter(ans => 
                    {
                        const name = ans.Name.split('-');
                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                    }) 
                : [];

            return filteredAnswers.map(ans => {
                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
                ans.Name = newName;
                return ans;
            });
        },
    },
    watch: {
        isAvailable(val) {
            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
            val && this.updateSelectedValues();
        }
    },
    components: {
        buttonQuestion,
    }
})
</script>
