<template>
  <div class="select-car">
    <div class="select-car-form rounded text-center">
      
      <Header
        :text="pageHeader.Text" class="Header"
      />
      <radioQuestion
        class="radioQuestion"
        :questionText="radioQuestion.Question"
        :answers="this.years"
        :chooseAnswer="selectYear"
      />
    </div>
  </div>
</template>

<script>
import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
import Header from "@/uxComponents/header/header";
import store from "@/store";
import router from "@/router";
import { mapState } from "vuex";

export default {
  name: "SelectYear",
  data() {
    return {
      years: [],
      pageHeader: {},
      radioQuestion: {}
    };
  },
  computed: {
    ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
  },
  mounted() {
    // Mocking Sitefinity data to (For Page Header and Radio Question)
    this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA, {relativeUrl: 'https://mockey.qa.sagaws.net/service/content/selectYear'})
    .then( (response) => {
      response.data.Result.forEach((m) => {
          switch (m.Type) {
              case 'PageHeadingWidget': {
                  this.pageHeader = m.Model;
                  break;
              }
              case 'RadioQuestionWidget': {
                  this.radioQuestion = m.Model;
                  break;
              }
              default: {
                  break;
              }
          }
      })
    });

    // Getting Years list
    this.dispatchNonBlockingStoreAction(this.storeActions.GET_YEARS)
        .then( (response) => {
          this.years = response.data;
    });
  },
  methods: {
    selectYear(year) {
      this.dispatchNonBlockingStoreAction("selectYear", { year: year }).then( (response) => {
        const makes = response;
        store.commit('updateYear', {year, makes});
        router.push(`select-make?year=${year}`);
      });
    }
  },
  components: {
    radioQuestion,
    Header,
  },
};
</script>
