<template>
    <buttonQuestion
        class="radioQuestion"
        isOverflowScrollable
        selectingInitiatesLoad
        :questionText="questionText"
        :answers="makes"
        groupName="ChooseVehicleMake"
        textPosition="text-start"
        v-model="selectedMake"
        :selectOnKeypress="false"
        isRequired />
</template>

<script>
import buttonQuestion from "@/common-components/button-question/button-question";
// Supporting files
import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
// import buttonQuestionWrapperMixin from "../../../mixins/button-question-wrapper-mixin";

export default {
    name: "make-question",
    // mixins: [buttonQuestionWrapperMixin],
    data() {
        return {
            makes: [],
            selectedMake: ""
        };
    },
    props: {
        modelValue: String,
        cmsWidgetName: String,
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
    },
    components: {
        buttonQuestion,
    },
    methods: {
        loadInitialData() {
            return baseMixin.methods.dispatchStoreAction(
                storeActions.GET_VEHICLE_MAKES,
                { year: store.getters.vehicle.year }
            );
        },
        initializeComponent(initialData) {
            this.makes = initialData;
        },
    },
    watch: {
        selectedMake(selectedMake) {
            this.$emit("update:modelValue", selectedMake);
        },
    },
};
</script>
