<template>
    <buttonQuestion
      class="radioQuestion"
      isOverflowScrollable
      selectingInitiatesLoad
      :questionText="questionText"
      :answers="makes"
      groupName="ChooseVehicleMake"
      textPosition="text-start"
      v-model="selectedValue"
      isRequired
    />
  </template>
  
  <script>
  import buttonQuestion from "@/common-components/button-question/button-question";
  import { useMainStore } from '@/store';
  
  export default {
    name: "make-question",
    data() {
      return {
        makes: Array,
      };
    },
    props: {
      modelValue: String,
      cmsWidgetName: String,
    },
    components: {
      buttonQuestion,
    },
    computed: {
      questionText(){
        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
      },
      selectedValue: {
        get: function() {
          return this.modelValue
        },
        set: function(newValue) {
          this.$emit("update:modelValue", newValue);
          this.mainStore.updateVehicleMake(newValue);
          console.log(this.mainStore.order.vehicle.make)
          this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route)
        }
      }
    },
    methods: {
      loadInitialData() {
        return useMainStore().getVehicleMakes();
      },
      initializeComponent(initialData) {
        this.makes = initialData;
      },
    },
  };
  </script>
  