<template>
  <div class="select-car sticky-lg-top py-4">
    <div class="select-car-form overflow-hidden p-3 rounded">
      <div class="car_info text-center">
        <Header
          text="Select a year to get started"
        />
        <radioQuestion
          questionText="What year is your vehicle?"
          :answers="this.years"
        />
      </div>
    </div>
  </div>
</template>

<script>
import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
import Header from "@/uxComponents/header/header";
import { endpoints } from "@/constants/endpoints.js";
import globalMethods from "@/global-methods";
import axios from "axios";

export default {
  name: "SelectCar",
  data() {
    return {
      years: [],
    };
  },
  mounted() {
    globalMethods.callHttpClient({
          method: endpoints.GetYears.method,
          endpoint: endpoints.GetYears.url,
          payload:{}
        })
        .then( (response) => {
          this.years = response.data.Result;
        });

        // Sample Call to Mockey to represent real data being sent back from the API, and how the modles are supposed to
        // be prosessed and passed to child components.
         axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => {
            response.data.Result.forEach((m) => {
                switch (m.Type) {
                    case this.widgetNames.PAGE_HEADING_WIDGET: {
                        this.pageHeader = m.Model;
                        break;
                    }
                    case this.widgetNames.RADIO_QUESTION_WIDGET: {
                        this.radioQuestion = m.Model;
                        break;
                    }
                    default: {
                        break;
                    }
                }
            })
        });
  },
  methods: {
    selectYear(year) {
      const listButtons = document.querySelectorAll('.list-button');
      globalMethods.disableItems(listButtons);
      this.dispatchNonBlockingStoreAction("selectYear", { year: year });
    }
  },
  components: {
    radioQuestion,
    Header,
  },
};
</script>
