<template>
    <transition name="fade">
        <div class="replace-options-question">
            I AM REPLACE OPTIONS QUESTION
        groupName is: {{groupName}}
            <buttonQuestion
                v-if="isAvailable && answersToDisplay.length > 1"
                :questionText="questionText"
                :isMultiSelect="isMultiSelect"
                :answers="answersToDisplay"
                :groupName="groupName"
                buttonType="listCard"
                v-model="selectedValues"
                :validationRules="setValidationRules()"
            />
        </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,
            groupName: String,
        }
    },
    props: {
        isMultiSelect: Boolean,
        isAvailable: Boolean,
        filterByVehicleCategory: Boolean,
        modelValue: Array,
    },
    methods: {
        initializeComponent(cmsContent, replaceOptions, groupName){
            this.groupName = groupName;
            this.questionText = cmsContent.QuestionText;
            this.answersFromCms = cmsContent.Answers;
            this.replaceOptions = replaceOptions;
        },
        setValidationRules() {
            const rulesArray = [
                {
                    name: "required",
                    test: (value) => {
                        // console.log('ROQ required value is... ', value);
                        if (!value || value.length < 1) {
                            console.log('ROQ should return false')
                            return false;
                        }
                        console.log('ROQ should return true')
                        return true;
                    },
                    error: 'Please select damage location'
                }
            ]

            return rulesArray;
        },
    },
    computed: {
        selectedValues: {
            get: function() {
                return this.modelValue;
            },
            set: function(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        },
        answersToDisplay(){
            return  Array.isArray(this.answersFromCms) 
                ? this.answersFromCms.filter(ans => 
                    {
                        const name = ans.Name.split('-');
                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
                    }) 
                : [];
        },
    },
    components: {
        buttonQuestion,
    }
})
</script>

<style lang="scss" scoped>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s ease;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }
</style>
