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

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

export default {
    name: "replaceOptionsQuestion",
    data() {
        return {
            replaceOptions: this.isMultiSelect ? [] : "",
        };
    },
    props: {
        isAvailable: Boolean,
        filterByVehicleCategory: Boolean,
        groupName: String,
        modelValue: [Array, String, Number],
        isMultiSelect: Boolean,
        validationRules: String,
        suppressError: Boolean,
        cmsWidgetName: String,
        isRequired: Boolean,
    },
    methods: {
        initializeComponent(replaceOptions) {
            this.replaceOptions = replaceOptions;
        },
        updateSelectedValues() {
            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
            if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
                this.selectedValues = this.isMultiSelect
                    ? [this.answersToDisplay[0].Name]
                    : this.answersToDisplay[0].Name;
            }
        },
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        answersFromCms() {
            return this.getCmsContent(this.cmsWidgetName, "Answers");
        },
        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;
                return {
                    Name: newName,
                    AnswerImageUrl: ans.AnswerImageUrl,
                    ImageId: ans.ImageId,
                    SubText: ans.SubText,
                    Text: ans.Text,
                };
            });
        },
        shouldDisplayReplaceOptionsQuestion() {
            return this.isAvailable && this.answersToDisplay.length > 0;
        },
    },
    watch: {
        isAvailable(val) {
            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
            val && this.updateSelectedValues();
        },
        shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
            if (!shouldDisplayReplaceOptionsQuestion) {
                this.selectedValues = this.isMultiSelect ? [] : "";
            }
        },
        replaceOptions(replaceOptions) {
            // For rear window, in case user chooses slider and later comes back
            // with a vehicle with only stationary
            if (
                !Array.isArray(this.selectedValues) &&
                !replaceOptions.includes(this.selectedValues)
            ) {
                this.selectedValues = null;
                this.updateSelectedValues();
            }
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>
