<template>
    <div class="damage-location-question">
        <buttonQuestion
            :questionText="questionText"
            isMultiSelect
            :answers="answersToDisplay"
            :groupName="groupName"
            buttonTypeString="listCard"
            isRequired
            v-model="selectedValues"
            validationRules="damage-location-required" />
    </div>
</template>

<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
import store from "@/store";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";

// DEFINE VALIDATION RULES
defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));

export default {
    name: "damageLocationQuestion",
    data() {
        return {
            damageOptions: Object,
        };
    },
    props: {
        modelValue: Array,
        groupName: String,
        cmsWidgetName: String,
    },
    methods: {
        initializeComponent(damageOptions) {
            this.damageOptions = damageOptions;
        },
    },
    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);
            },
        },
        damageOptionsMap() {
            return {
                Windshield: true,
                SideDoor:
                    this.damageOptions.driverSideOptions.availableReplacementOptions.length ||
                    this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
            };
        },
        answersToDisplay() {
            const filteredAnswers = Array.isArray(this.answersFromCms)
                ? this.answersFromCms.filter((ans) => {
                      const name = ans.Name.split("-");
                      return (
                          name[0].toUpperCase() === store.getters.vehicle.category &&
                          this.damageOptionsMap[name[1]]
                      );
                  })
                : [];
            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,
                };
            });
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>
