<template>
  <buttonQuestion
    class="radioQuestion"
    isOverflowScrollable
    selectingInitiatesLoad
    :questionText="questionText"
    :answers="styles"
    groupName="ChooseVehicleStyle"
    textPosition="text-start"
    v-model="selectedStyle"
    :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: "style-question",
  // mixins: [buttonQuestionWrapperMixin],
  data() {
    return {
      styles: [],
      selectedStyle: ""
    };
  },
  props: {
    cmsWidgetName: String,
  },
  computed: {
    questionText(){
      return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
    },
  },
  components: {
    buttonQuestion,
  },
  methods: {
    loadInitialData() {
      return baseMixin.methods.dispatchStoreAction(
        storeActions.GET_VEHICLE_STYLES,
        {
          year: store.getters.vehicle.year,
          make: store.getters.vehicle.make,
          model: store.getters.vehicle.model,
        }
      );
    },
    initializeComponent(initialData) {
      this.styles = initialData;
    },
  },
  watch: {
    selectedStyle(selectedStyle) {
      this.$emit("update:modelValue", selectedStyle);
    }
  }
};
</script>
