<template>
<buttonQuestion class="radioQuestion"
    :questionText="questionText"
    :answers="makes"
    groupName="Choose Vehicle Make"
    v-model="selectedMake"
  />
</template>

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

export default {
  name: "make-question",
  data() {
    return {
      questionText: null,
      selectedMake: null,
      makes: Array,
    }
  },
  props: {
    modelValue: String,
  },
  components: {
    buttonQuestion,
  },
  methods: {
    loadInitialData() {
      console.log(store);
      return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
    },
    initializeComponent(cmsContent, initialData) {
      this.questionText = cmsContent.QuestionText;
      this.makes = initialData;
    }
  },
  watch: {
    selectedMake(val) {
      this.$emit("update:modelValue", val);
    }
  },
};
</script>
