<template>
    <transition name="fade">
        <div class="replace-options-question">
            <buttonQuestion
                v-if="isAvailable && answersToDisplay.length > 1"
                :questionText="questionText"
                isMultiSelect
                :answers="answersToDisplay"
                :groupName="groupName"
                buttonType="listCard"
                v-model="selectedValues"
                validationRules="replace-options-required"
            />
        </div>
    </transition>
</template>

<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import store from "@/store";
import { defineRule } from "vee-validate";

// DEFINE VALIDATION RULES
defineRule("replace-options-required", (value) => {
    if (!value || value.length < 1) {
        return "Please select window";
    }
    return true;
});

export default ({
    name: "replaceOptionsQuestion",
    data(){
        return {
            questionText: String,
            answersFromCms: Array,
            replaceOptions: Array,
        }
    },
    props: {
        isAvailable: Boolean,
        filterByVehicleCategory: Boolean,
        groupName: String,
        modelValue: Array,
    },
    methods: {
        initializeComponent(cmsContent, replaceOptions){
            this.questionText = cmsContent.QuestionText;
            this.answersFromCms = cmsContent.Answers;
            this.replaceOptions = replaceOptions;
        },
    },
    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>
