<template>
    <buttonQuestion
      class="radioQuestion"
      isOverflowScrollable
      selectingInitiatesLoad
      :questionText="questionText"
      :answers="models"
      groupName="ChooseVehicleModel"
      textPosition="text-start"
      v-model="selectedValue"
      isRequired
    />
  </template>
  
  <script>
  import buttonQuestion from "@/digital-components/button-question/button-question";
  import { useMainStore } from '@/store';
  
  export default {
    name: "model-question",
    data() {
      return {
        models: Array,
      };
    },
    props: {
      modelValue: String,
      cmsWidgetName: String,
    },
    computed: {
      questionText(){
        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
      },
      selectedValue: {
        get: function() {
          return this.modelValue
        },
        set: function(newValue) {
          this.$emit("update:modelValue", newValue);
        }
      }
    },
    components: {
      buttonQuestion,
    },
    methods: {
      loadInitialData() {
        return useMainStore().getVehicleModels();
      },
      initializeComponent(initialData) {
        this.models = initialData;
      },
    },
  };
  </script>
  